Remove an element from a useState Array in React 18

When we are working with React and array state, we may need to remove an item from a React component's state array.

JavaScript's React UI library is solely responsible for rendering the user interface. No helper libraries for arrays are provided, but JavaScript already has a number of methods to work with arrays and other data types.

We must, however, exercise caution when using these array methods to manipulate the state created by react hooks such as useState, because React uses special hooks for working with state that should be immutable. Since our component state contains an array, how may we remove one of its elements?

How to delete an element from a useState Array in a React Component

How to delete an item from a React component's state array will be the focus of this section.

We can update the state array of a React component using the callback function of the state setter method to return a new array.

Let's pretend we're working with React.js and our component state is an array.

In the callback of the state setter function, we may return a new array to update a React component's state array. As an example, consider the following:

const [productsArray, setProductsArray] = useState([]);

We can remove an element by its index by setting the new state for the array as follows:

setProductsArray((products) => products.filter((_, index) => index !== 0));

Here we delete the element of index zero which is the first element of the array.

Let's go into further depth on this.

We use React's useState hook to define a state array named productsArray for our products.

We filter the products array to delete the first member and we set the result as the new state using the callback argument of the setProductsArray() method.

Calling filter with a callback that checks to see whether the index is different than zero removes the first entry from the array that has been returned. The array returned by the filter() method will be used as the new state.

Remove element from state array by index

We have seen how to remove the element of index zero. What if we need to delete an element from any index, rather than only index zero? This may be accomplished by combining the spread operator from JavaScript with the array object's slice() method.

First, we need to define a function with an index argument:

const removeProduct = (index) => {
  setProductsArray([
    ...products.slice(0, index),
    ...products.slice(index + 1, products.length)
  ]);
}

In the initial call to the slice() method, an array is returned from the beginning up to, but not comprising, the index, and then a second call yields an array from index + 1 to the end. We utilize the spread operator to construct a new array from the values excluding the index's element then we set our new state.

We are retaining all the values except the element of the index.

Conclusion

As a recap, when dealing with React and array state, we may find ourselves in a situation where we need to delete an item from the state array of a particular React component.

React is a JavaScript user interface library that is solely responsible for the rendering of the user interface. Even though it does not provide any helper libraries for working with arrays, JavaScript already has a multitude of ways for handling with arrays and other types of data.

However, since React makes use of particular hooks for interacting with state that should be immutable, we must exercise caution when utilizing these array methods to manipulate the state produced by react hooks such as useState(). We can therefore delete a specific element from a previously stored array in our component state by returning a new array that does not contain the designated element using array methods such as filter() or slice() along with the spread operator, and then setting this new array as the component's state using the useState setter method.

• Date: 25 Apr 2022