Replace an Object in Array in React state

avatar

Borislav Hadzhiev

Last updated: Apr 18, 2022

banner

Photo from Unsplash

Replace an Object in Array in React state #

To replace 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. Replace 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 replace object if (obj.id === 2) { return {id: 1234, country: 'Germany'}; } // 👇️ 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 that equals 2. If it does, we replace it with a new object.

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 keep track of and re-render only what changes.

If I click on the button, the second object in the state array gets replaced.

replace object in array react

Note that you can also update only certain properties on the object in your 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 = () => { 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 code snippet above is very similar to previous one. However, instead of replacing the entire object, we override the country property in and use the spread syntax (...) to copy over the rest of the properties.

This is useful when you don't need to replace the entire object, and need to only update some of the object's properties.

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.