How To Delete An Item From State Array in ReactJS?

It is important to manage the state in ReactJS for building interactive user interfaces. Sometimes when we work with arrays, we need to remove an item from these arrays. A common use case is deleting an item from an array stored in the component’s state. In this article, we’ll explore different ways to handle this operation in ReactJS.

Below are different Possible approaches to deleting an item from a state array in ReactJS:

1. Using the filter() Method

The filter() method creates a new array with all elements that pass the test implemented by the provided function. We can filter out the items we want to remove.

Syntax

const newArray = array.filter(item => item !== valueToRemove);

2. Using the slice() Methods

The slice() method creates a shallow copy of an array, while the splice() method allows us to remove elements from an array. We can use them together to create a new array without the item we want to remove.

Syntax

const newArray = [...array.slice(0, index), ...array.slice(index + 1)];

3. Using the splice() Method

The splice() method allows us to modify an array by adding, removing, or replacing elements. To delete an item from an array, we can use splice() to remove an element at a specified index.

Syntax

const updatedArray = [...array];
updatedArray.splice(indexToDelete, 1); 

Steps To Delete An Item From a State Array

Step 1 : Install Node.js and npm

We should ensure that Node.js and npm are installed on our system. If not installed we can install it from official website of Node.js

Step 2: Create a New React Project

Now we open our terminal and run the following command to create a new React project:

npx create-react-app react-state-management

cd react-state-management

Now, Install Necessary Dependencies

For this basic project, we don't need to install additional dependencies, but ensure that our React and ReactDOM versions are up to date. We can run:

npm install

Project Structure

After setting up the project, our folder structure should look like this:

Deleting an Item Using the filter() Method

Example : Let us suppose we have a list of tasks, and we want to remove a task by its name. We replace the code in src/app.js with the given code below:

import React, { useState } from 'react';

function TaskList() {
    const [tasks, setTasks] = useState(['Do laundry', 'Write code', 'Read a book']);

    const deleteTask = (taskToDelete) => {
        const updatedTasks = tasks.filter(task => task !== taskToDelete);
        setTasks(updatedTasks);
    };

    return (
        <div>
            <h1>My Tasks</h1>
            <ul>
                {tasks.map((task, index) => (
                    <li key={index}>
                        {task} <button onClick={() => deleteTask(task)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default TaskList;

Output: In this example, when we click the "Delete" button next to a task will remove it from the list.

Deleting an Item Using the slice() Methods

Example: Here, we have a list of items, and we want to remove an item by its index. We replace the code in src/app.js with the given code below:

import React, { useState } from 'react';

function ItemList() {
    const [items, setItems] = useState(['Apple', 'Banana', 'Orange']);

    const deleteItem = (indexToDelete) => {
        const updatedItems = [...items.slice(0, indexToDelete), ...items.slice(indexToDelete + 1)];
        setItems(updatedItems);
    };

    return (
        <div>
            <h1>My Items</h1>
            <ul>
                {items.map((item, index) => (
                    <li key={index}>
                        {item} <button onClick={() => deleteItem(index)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default ItemList;

Output: Clicking the "Delete" button next to an item will remove that specific item from the list.

Deleting an Item Using the Splice Method

Example: Here, we have a list of items, and we want to remove an item by its index. We replace the code in src/app.js with the given code below

import React, { useState } from 'react';

function ItemList() {
    const [items, setItems] = useState(['Apple', 'Banana', 'Orange']);

    const deleteItem = (indexToDelete) => {
        const updatedItems = [...items]; 
        updatedItems.splice(indexToDelete, 1); 
        setItems(updatedItems);
    };

    return (
        <div>
            <h1>My Items</h1>
            <ul>
                {items.map((item, index) => (
                    <li key={index}>
                        {item} <button onClick={() => deleteItem(index)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default ItemList;

Output: Clicking the "Delete" button next to an item will remove that specific item from the list.