JIYIK CN >

To replace an object in an array in React state:

1. Use map()the method to iterate over an array.
2. In each iteration, check whether a condition is met.
3. Replaces objects that satisfy a condition and returns all other objects as is.

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 pass to Array.mapthe method is called for each element (object) in the array.

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

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

In each iteration, we check if the object has an id property equal to 2. If so, we replace it with the new object.

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

It is extremely important not to mutate state directly in a React application. When we exclusively use setStatemethods to update a component's state, it is easier for React to track and re-render only what has changed.

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

Note that we can also update only certain properties of the objects in the state array.

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 above code snippet is very similar to the previous one. However, instead of replacing the entire object, we overwrote countrythe properties and copied the remaining properties using the spread syntax ....

This is useful when we don't need to replace the entire object and only need to update certain properties of the object.