Updating multiple array object values with useState in React

Question

Feels like I'm frustratingly close to solving this, but not sure how to update all of the values in a given object array with useState. Here's an example:

    const [data, setData] = useState([
       {key: 1,
        value: 25},
       {key: 2,
        value: 30}
        ])

And then assume on a button click I want to add 10 to the value of every item in the array:

    const handleClick = () => {

    const newData = data.map(item => item.value + 10)

     setData ([
         ...data, ???

     ])

newData delivers an updated array, but I'm not sure how to use the Hook to update the state. Thanks!

Shubham Khatri · Accepted Answer · 2020-05-14 18:04:47Z

2

You can make use of functional state updater and return the mapped result. Also note that since each value is an object you must clone and update just the value field

 const handleClick = () => {
     setData (prevData => data.map(item => ({...item, value: item.value+10})));
}

To put it in your way, it would be like

const handleClick = () => {

    const newData = data.map(item => { 
          return {...item, value: item.value + 10}
    });

     setData(newData);
}

answered May 14, 2020 at 18:04

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

rocketjot Over a year ago

That's exactly it. Thank you so much!

Brian Polanco · Accepted Answer · 2020-05-14 18:06:08Z

-1

You should setData to the result of your map iteration. It should be something like this:

const handleClick = () => {

   const newData = data.map(item => item.value + 10)

   setData(newData)
}

answered May 14, 2020 at 18:06

Brian Polanco

481 silver badge8 bronze badges

Collectives™ on Stack Overflow

Updating multiple array object values with useState in React

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related