How to Remove Item from Array in React State Easily

To remove an item from an array in React state, use the useState hook and update the state by creating a new array without the item using filter(). Then call the state setter function with this new array to update the state.

Syntax

Use the useState hook to hold your array. To remove an item, create a new array excluding that item using filter(). Then update the state with the new array.

Example parts explained:

• const [items, setItems] = useState([...]): declares state holding an array.
• items.filter(item => item !== valueToRemove): creates a new array without the item to remove.
• setItems(newArray): updates the state with the new array.

javascript

const [items, setItems] = useState(['apple', 'banana', 'orange']);

const removeItem = (valueToRemove) => {
  const newItems = items.filter(item => item !== valueToRemove);
  setItems(newItems);
};

Example

This example shows a React functional component with a list of fruits. Clicking a button removes that fruit from the list by updating the state array.

javascript

import React, { useState } from 'react';

function FruitList() {
  const [fruits, setFruits] = useState(['Apple', 'Banana', 'Orange']);

  const removeFruit = (fruitToRemove) => {
    setFruits(fruits.filter(fruit => fruit !== fruitToRemove));
  };

  return (
    <div>
      <h2>Fruits:</h2>
      <ul>
        {fruits.map(fruit => (
          <li key={fruit}>
            {fruit} <button onClick={() => removeFruit(fruit)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Output

<div>
  <h2>Fruits:</h2>
  <ul>
    <li>Apple <button>Remove</button></li>
    <li>Banana <button>Remove</button></li>
    <li>Orange <button>Remove</button></li>
  </ul>
</div>

Common Pitfalls

Mutating state directly: Do not change the original array directly (like using splice() on state) because React won't detect the change and won't update the UI.

Incorrect filter condition: Make sure the filter condition correctly excludes the item you want to remove.

javascript

/* Wrong way: mutating state directly */
const removeItemWrong = (index) => {
  items.splice(index, 1); // This mutates the original array
  setItems([...items]); // React may not re-render if setItems(items) is used
};

/* Right way: create a new array without the item */
const removeItemRight = (index) => {
  setItems(items.filter((_, i) => i !== index));
};

Quick Reference

• Use filter() to create a new array without the item.
• Always update state with a new array, never mutate the original.
• Use the state setter function from useState to update.
• Use unique keys when rendering lists to avoid UI bugs.

Key Takeaways

Always create a new array when removing items from React state to trigger re-render.

Use the array filter method to exclude the item you want to remove.

Never mutate the state array directly; use the setter function from useState.

Pass a unique key prop when rendering lists to keep UI consistent.

Test your removal logic to ensure the correct item is removed.