React update dynamic nested state

Question

I have data object as

let d = {
    'items': [
     {'item':'apple', price: 200},
     {'item':'banana', price: 300},
    ],
    tot:[2],
    'shop': 'xyx shop',
    'customer':['a','b','c']
    }

i am getting it from an api call and setting it to a state. Like this

const [state, setState] = useState({})

useEffect(
{
setState(d)
},[])

Here how can I update the price?

I have tried this

setState({...state, items[index].price - 1});

It's not working at all.

0stone0 · Accepted Answer · 2021-07-27 12:47:37Z

1

Copy the items array from state
Change the data
Override the items array

let index = 1;
let newItems = [ ...state.items ];
newItems[index].price++;
      
setState({ ...state, items: newItems });

Example:

const {useState} = React;

const SameSet = () => {

    const [state, setState] = useState({
        'items': [
            {'item':'apple', price: 200},
            {'item':'banana', price: 300},
        ],
        tot: [ 2 ],
        'shop': 'xyx shop',
        'customer': ['a','b','c']
    });
    
    const update = () => {
     
      // Index to update
      let index = 1;
      
      // Copy
      let newItems = [ ...state.items ];
      
      // Bump
      newItems[index].price++;
      
      // Override
      setState({ ...state, items: newItems });
    }

    return (
        <div>
            <button onClick={update}>Click me to update!</button>
            {state.items.map(i => <em>{i.item}{' -- '}{i.price}</em>)}
        </div>
    )
}
ReactDOM.render(<SameSet />, document.getElementById("react"));

div { display: flex; flex-direction: column; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

answered Jul 27, 2021 at 12:47

0stone0

45.5k6 gold badges54 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rafael Buzatto de Campos Over a year ago

technically, you are mutating item when you do newItems[index].price++;. when you create a copy from items array you still have the same old object references that array contains. you should create a new copy from the object you are updating with new price value.

Collectives™ on Stack Overflow

React update dynamic nested state

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related