Borislav Hadzhiev
Sat Apr 23 2022·2 min read
Photo by Eddi Aguirre
To remove an element from an array of objects in React:
filter()
method to iterate over the array.filter
method returns an array containing only the elements that
satisfy the condition.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> ); }
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.
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.
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.
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.
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.
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.