React - delete element from state array

In this article, we would like to show you how to delete element from state array in React.

Quick solution:

const [array, setArray] = React.useState(['a', 'b', 'c']);

// remove by index (item with index 1 will be removed)
setArray(array.filter((item, index) => index !== 1));

// remove by value (all 'b' items will be removed)
setArray(array.filter((item, index) => item !== 'b'));

Practical example

In this example, we present how to delete an element from a state array (list) using filter() method and modifying the array's length.

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';

const App = () => {
  const [list, setList] = React.useState([1, 2, 3]);

  const handleRemove = () => {
      const items = list;
      if (items.length > 0) {
          const lastIndex = items.length - 1;
          setList(items.filter((item, index) => index !== lastIndex));
      }
  };

  return (
    <div className='wrapper'>
      <div>List: {list.length} total items.</div>
      <button onClick={handleRemove}>Remove item</button>
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

See also

1. React - how to add / remove items from array in state (functional component)

References

1. Array.prototype.filter() - JavaScript | MDN