CODEWITHSUNDEEP
reactjs
geek glance
geek glance

Reputation: 111

React update dynamic nested state

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.

Upvotes: 0

Views: 26

Answers (1)

0stone0
0stone0

Reputation: 43904

  1. Copy the items array from state
  2. Change the data
  3. 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>

Upvotes: 1

Related Questions