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

6 points
Created by:

In this article, we would like to show you how to add and remove items from an array used as state in React component.

Note: to force React to re-render component we need to provide always new reference into setState function (const [state, setState] = ...).

Below example provides two actions:

  • Add item: that calls¬†handleAddItem¬†method that¬†uses¬†spread operator (...) to create a array copy with new item that is put on the last position and¬†finally¬†setList()¬†method updates the state value - we set new reference as state.
  • Remove item: that calls¬†handleRemoveItem¬†method¬†that¬†uses¬†filter()¬†method to make array copy with removed¬†indicated item (in example case it is last index) - we set new reference as state.

Runnable example:

// ONLINE-RUNNER:browser;

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

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

  const handleAddItem = () => {
    const items = list;
    setList([...items, `item-${items.length}`]);

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

  return (
    <div className="wrapper">
        List: {list.length} total items.
      <button onClick={handleAddItem}>Add</button>
      <button onClick={handleRemoveItem}>Remove</button>
        {, index) => <li key={index}>{item}</li>)}

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


Go to this article to see the class component example.



React - add / remove items from array in state (functional component)
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā