How can I update state.item[1] in state using setState?

by

Since there’s a lot of misinformation in this thread, here’s how you can do it without helper libs:

handleChange: function (e) {
    // 1. Make a shallow copy of the items
    let items = [...this.state.items];
    // 2. Make a shallow copy of the item you want to mutate
    let item = {...items[1]};
    // 3. Replace the property you're intested in
    item.name="newName";
    // 4. Put it back into our array. N.B. we *are* mutating the array here, but that's why we made a copy first
    items[1] = item;
    // 5. Set the state to our new copy
    this.setState({items});
},

You can combine steps 2 and 3 if you want:

let item = {
    ...items[1],
    name: 'newName'
}

Or you can do the whole thing in one line:

this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));

Note: I made items an array. OP used an object. However, the concepts are the same.

You can see what’s going on in your terminal/console:

❯ node
> items = [{name:'foo'},{name:'bar'},{name:'baz'}]
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ]
> clone = [...items]
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ]
> item1 = {...clone[1]}
{ name: 'bar' }
> item1.name="bacon"
'bacon'
> clone[1] = item1
{ name: 'bacon' }
> clone
[ { name: 'foo' }, { name: 'bacon' }, { name: 'baz' } ]
> items
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] // good! we didn't mutate `items`
> items === clone
false // these are different objects
> items[0] === clone[0]
true // we don't need to clone items 0 and 2 because we're not mutating them (efficiency gains!)
> items[1] === clone[1]
false // this guy we copied

More Related Contents:

  1. React setState not updating state
  2. Does React keep the order for state updates?
  3. React: how to update state.item[1] in state using setState?
  4. setInterval in a React app
  5. React – setState() on unmounted component
  6. How to check for broken images in React JS
  7. Update single value in item array | react redux
  8. How can I wait for setState to finish before triggering a function in React?
  9. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  10. How can I communicate between related react components?
  11. When to use functional setState
  12. How to call loading function with React useEffect only once
  13. Applying className/onClick/onChange not working on Custom React Component
  14. Using async/await inside a React functional component
  15. Objects are not valid as a React child (found: [object Promise])
  16. How to update React Context from inside a child component?
  17. React – getting a component from a DOM element for debugging
  18. How to loop and render elements in React.js without an array of objects to map?
  19. Do I have to store tokens in cookies or localstorage or session?
  20. When should I use brackets with imports
  21. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  22. Uncaught Error: Invariant Violation: findComponentRoot(…, …$110): Unable to find element. This probably means the DOM was unexpectedly mutated
  23. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  24. Error: How to serialize data from getStaticProps : Next.js
  25. Update one of the objects in array, in an immutable way
  26. How to Set port in next.js
  27. What does useCallback/useMemo do in React?
  28. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  29. Difference between React Component and React Element
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment