Remove an element from an array of objects in React

Remove an element from an array of objects in React #

To remove an element from an array of objects in React:

Use the filter() method to iterate over the array.
On each iteration check if a certain condition is met.
The filter method returns an array containing only the elements that satisfy 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);

  const removeSecond = () => {
    setEmployees(current =>
      current.filter(employee => {
        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>
  );
}

remove object from array

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 => {
  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 = () => {
  setEmployees(current =>
    current.filter(employee => {
      return employee.id !== 2;
    }),
  );
};

If you need to remove an object from an 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 element from an array of objects in React

Remove an element from an array of objects in React #

Borislav Hadzhiev