Remove an Object from state Array in React

Remove an Object from state Array in React #

To remove an object from a state array in React:

Use the filter() method to iterate over the array.
On each iteration, check if a condition is met.
Set the state to the new array that the filter method returned.

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);

  const removeSecond = () => {
    setEmployees(current =>
      current.filter(employee => {
        // 👇️ remove object that has id equal to 2
        return employee.id !== 2;
      }),
    );
  };

  return (
    <div>
      <button onClick={removeSecond}>Remove second</button>

      {employees.map(({id, name, country}) => {
        return (
          <div key={id}>
            <h2>name: {name}</h2>
            <h2>country: {country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

react remove object from state array

We initialized an employees state variable using the useState hook.

The function we passed to the Array.filter method will get called with each element in the array.

On each iteration, we check if the id property of the object is not equal to 2 and return the result.

App.js

Copied!
const initialState = [
  {id: 1, name: 'Alice', country: 'Austria'},
  {id: 2, name: 'Bob', country: 'Belgium'},
];

const filtered = initialState.filter(obj => {
  // 👇️ returns truthy for all elements that
  // don't have an id equal to 2
  return obj.id !== 2;
});

// 👇️ [{id: 1, name: 'Alice', country: 'Austria'}]
console.log(filtered);

The filter method returns a new array containing only the elements for which the callback function returned a truthy value.

If the condition is never met, the Array.filter function returns an empty array.

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

App.js

Copied!
const removeSecond = () => {
  // 👇️ current is the current state array
  setEmployees(current =>
    current.filter(employee => {
      return employee.id !== 2;
    }),
  );
};

When the next state is computed using the previous state, pass a function to setState.

Otherwise, we might get some weird race condition if the state array we have access to does not represent the most up to date value.

If you need to remove an object from a state array based on multiple conditions, use the logical AND (&&) or logical OR (||) operators.

App.js

Copied!
const initialState = [
  {id: 1, name: 'Alice', country: 'Austria'},
  {id: 2, name: 'Bob', country: 'Belgium'},
  {id: 3, name: 'Carl', country: 'Austria'},
];

const [employees, setEmployees] = useState(initialState);

const remove = () => {
  setEmployees(current =>
    current.filter(employee => {
      return employee.id !== 3 && employee.id !== 2;
    }),
  );
};

We used the logical AND (&&) operator which will only return a truthy value if both conditions are met.

The callback function returns true only if the id property of the object is not equal to 3 and not equal to 2.

And here is an example that uses the logical OR (||) operator.

App.js

Copied!
const initialState = [
  {id: 1, name: 'Alice', country: 'Austria'},
  {id: 2, name: 'Bob', country: 'Belgium'},
  {id: 3, name: 'Carl', country: 'Austria'},
];

const [employees, setEmployees] = useState(initialState);

const remove = () => {
  setEmployees(current =>
    current.filter(employee => {
      return employee.name === 'Alice' || employee.name === 'Carl';
    }),
  );
};

Either of the 2 conditions has to evaluate to a truthy value for the element to be added to the new array.

In other words, if the name property on the object is equal to Alice or equal to Carl, the object will be added to the new array. All other objects are filtered out from the array.

Remove an Object from state Array in React

Remove an Object from state Array in React #

Borislav Hadzhiev