How to Update an Array of Objects state in React

# Table of Contents

# Update an Object in an Array in React State

To update an object in an array in React state:

Use the map() method to iterate over the array.
On each iteration, check if a certain condition is met.
Update the object that satisfies the condition and return all other objects as is.

App.js

Copied!
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 the 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;

update object in array

The code for this article is available on GitHub

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 doesn't mutate the original array, it returns a new array.

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

App.js

Copied!
const updateState = () => {
  const newState = data.map(obj => {
    // 👇️ If id equals 2, update country property
    if (obj.id === 2) {
      return {...obj, country: 'Denmark'};
    }

    // 👇️ Otherwise return the object as is
    return obj;
  });

  setData(newState);
};

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 isn't 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

Want to learn more about managing object state in React? Check out these resources: Remove a Key from a state Object in React,Find and render an Object in an Array using React.js.

# Passing a function to the `setState` method

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

Copied!
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 a function to the 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 the 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;

react update array of objects

The code for this article is available on GitHub

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.

App.js

Copied!
const updateState = () => {
  // 👇️ Passing a function to the setData method
  setData(prevState => {
    const newState = prevState.map(obj => {
      // 👇️ if id equals 2, update the country property
      if (obj.id === 2) {
        return {...obj, country: 'Denmark'};
      }

      // 👇️ otherwise return the object as is
      return obj;
    });

    return newState;
  });
};

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

# Update an array of objects state in React

To update an array of objects state in React:

Use the map() method to iterate over the array.
On each iteration, check if a certain condition is met.
Update the properties of the object that matches the condition.

App.js

Copied!
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 the 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 code for this article is available on GitHub

The examples show how to:

Add an object to a state array.
Update one or more objects in a state array.
Remove one or more objects from a 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

Copied!
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

Copied!
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

Copied!
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.

Want to learn more about managing array state in React? Check out these resources: How to Filter an Array of Objects in React,How to push an Element into a state Array in React,Remove an Element from state Array in React.

# Replace an Object in Array in React state

To replace an object in an array in the state:

Use the map() method to iterate over the array.
On each iteration, check if a certain condition is met.
Replace the object that satisfies the condition and return all other objects as is.

App.js

Copied!
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 the 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;

replace object in array in react

The code for this article is available on GitHub

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

Copied!
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 the 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;

only updating certain properties of the object

The code for this article is available on GitHub

The code snippet above is very similar to the previous one. However, instead of replacing the entire object, we override the country property 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've also written an article on how to update nested properties in a state object.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Update an Array of Objects state in React

# Table of Contents

# Update an Object in an Array in React State

# Passing a function to the setState method

# Update an array of objects state in React

# Replace an Object in Array in React state

# Additional Resources

Borislav Hadzhiev

# Passing a function to the `setState` method