Update an Object in an Array in React State

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Update an Object in an Array in React State #

To update an object in an array in React state:

  1. Use the map() method to iterate over the array.
  2. On each iteration, check if a certain condition is met.
  3. Update the object that satisfies the condition and return all other objects as is.
App.js
import {useState} from 'react'; const App = () => { const initialState = [ {id: 1, country: 'Austria'}, {id: 2, country: 'Belgium'}, {id: 3, country: 'Canada'}, ]; const [data, setData] = useState(initialState); const updateState = () => { const newState = data.map(obj => { // 👇️ if id equals 2, update country property if (obj.id === 2) { return {...obj, country: 'Denmark'}; } // 👇️ otherwise return object as is return obj; }); setData(newState); }; return ( <div> <button onClick={updateState}>Update state</button> {data.map(obj => { return ( <div key={obj.id}> <h2>id: {obj.id}</h2> <h2>country: {obj.country}</h2> <hr /> </div> ); })} </div> ); }; export default App;

The function we passed to the Array.map method gets called with each element (object) in the array.

Whatever we return from the function we passed to the map() method gets inserted into the new array.

The map() method does not mutate the original array, it returns a new array.

On each iteration, we check if the object has an id property equal to 2.

If it does, we use the spread operator (...) to unpack the other key-value pairs of the object and then we override the country property.

If the condition is not met, we return the object as is.

It is very important to not mutate the state directly in React applications. When we exclusively use the setState method to update a component's state, it's easier for React to track changes and re-render only what's necessary.

The second object in the state array gets updated when I click on the button.

update object in array react

You can also pass a function to the setState method that we get from the useState hook.

The function gets called with the current state and can be used to update a specific object in the state array.

App.js
import {useState} from 'react'; const App = () => { const initialState = [ {id: 1, country: 'Austria'}, {id: 2, country: 'Belgium'}, {id: 3, country: 'Canada'}, ]; const [data, setData] = useState(initialState); const updateState = () => { // 👇️ passing function to setData method setData(prevState => { const newState = prevState.map(obj => { // 👇️ if id equals 2, update country property if (obj.id === 2) { return {...obj, country: 'Denmark'}; } // 👇️ otherwise return object as is return obj; }); return newState; }); }; return ( <div> <button onClick={updateState}>Update state</button> {data.map(obj => { return ( <div key={obj.id}> <h2>id: {obj.id}</h2> <h2>country: {obj.country}</h2> <hr /> </div> ); })} </div> ); }; export default App;

The code sample achieves the same result.

However, this time we passed a function directly to the setData method. The function gets called with the current state, which we can use to calculate the next state.

Whatever we return from the callback function gets set as the new state.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.