Update an array of objects state in React

avatar

Borislav Hadzhiev

Last updated: Apr 23, 2022

banner

Photo from Unsplash

Update an array of objects state in React #

To update an array of objects state in React:

  1. Use the map() method to iterate over the array.
  2. On each iteration, check if a certain condition is met.
  3. Update the properties of the object that matches the condition.
App.js
import {useState} from 'react'; export default function App() { const initialState = [ {id: 1, name: 'Alice', country: 'Austria'}, {id: 2, name: 'Bob', country: 'Belgium'}, ]; const [employees, setEmployees] = useState(initialState); // ✅ Add an object to a state array const addObjectToArray = obj => { setEmployees(current => [...current, obj]); }; // ✅ Update one or more objects in a state array const updateObjectInArray = () => { setEmployees(current => current.map(obj => { if (obj.id === 2) { return {...obj, name: 'Sophia', country: 'Sweden'}; } return obj; }), ); }; // ✅ Remove one or more objects from state array const removeObjectFromArray = () => { setEmployees(current => current.filter(obj => { return obj.id !== 2; }), ); }; return ( <div> <button onClick={() => addObjectToArray({ id: Math.random(), name: 'Carl', country: 'Canada', }) } > Add employee </button> <button onClick={updateObjectInArray}>Update object in array</button> <button onClick={removeObjectFromArray}>Remove object from array</button> {employees.map(employee => { return ( <div key={employee.id}> <h2>name: {employee.name}</h2> <h2>country: {employee.country}</h2> <hr /> </div> ); })} </div> ); }

update array of objects state

The examples show how to:

  1. Add an object to a state array.
  2. Update one or more objects in a state array.
  3. Remove one or more objects from state array.

To add an object to a state array, we have to use the spread syntax (...) to unpack the elements of the array and add the object at the end.

App.js
const addObjectToArray = obj => { setEmployees(current => [...current, obj]); }; addObjectToArray({ id: 3, name: 'Carl', country: 'Canada', })

We passed a function to setState because it is guaranteed to be called with the current (most up to date) state.

To update an object in a state array, call the map() method to iterate over the array and update the object that matches the condition.

App.js
const updateObjectInArray = () => { setEmployees(current => current.map(obj => { if (obj.id === 2) { return {...obj, name: 'Sophia', country: 'Sweden'}; } return obj; }), ); };

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

On each iteration, we check if the id of the object is equal to 2, and if it is, we update its name and country properties.

Otherwise, we return the object as is.

We can use the Array.filter method to remove an object from a state array in React.

App.js
const removeObjectFromArray = () => { setEmployees(current => current.filter(obj => { return obj.id !== 2; }), ); };

The function we passed to the filter method gets called with each element in the array.

On each iteration, we check if the object doesn't have an id equal to 2 and return the result.

The filter method returns a new array containing only the truthy values that the callback function returned.

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.