Borislav Hadzhiev
Wed Apr 27 2022·3 min read
Photo by Christina R. Stryger
To remove an object from a state array in React:
filter()
method to iterate over the array.filter
method returned.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> ); }
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.
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.
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 = () => { // 👇️ 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
.
If you need to remove an object from a state 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.