React: Removing Items from a List (Full Example)

Updated: March 2, 2023 By: A Goodman Post a comment

When developing web apps with React, there are innumerable cases where we have to render a list of things, such as a list of users, a list of tasks, a list of products, etc. In these situations, you might want to add a delete button to each item in the list so that people can discard specific ones that they no longer need.

This practical article walks you through a complete example of removing items from a list in React. We’ll use the useState hook and function components.

A Quick Note

Let’s say we have an array of objects and each object has a property called id. To remove the object associated with a given id, we can use the Array.filter() method:

const updatedList = items.filter((item) => !== id);

Let’s see how we’ll apply this in React.

The Example

App Preview

The demo we’re going to make renders a list of items. Each item goes with an X button (with a red background color), which can be used to delete the corresponding item.

Here’s how it works:

The Steps

1. Create a new React project:

npx create-react-app kindacode-list-items example

2. The full source code in src/App.js:

// src/App.js
import { useState } from 'react';
import './App.css';

function App() {
  // Declare the state variable, which we'll call "items"
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 5, name: 'Item 4 -' },
    { id: 4, name: 'Item 4' },

  // Delete the item with the given id
  // This function will be called when an "X" button is clicked
  const removeItem = (id) => {
    const updatedList = items.filter((item) => !== id);

  return (
    <div className='container'>
      <h2> - Demo App</h2>
      <p>You can delete an item by using the "X" button associated with it</p>

      {/* Implement the list */}
      <div className='list'>
        { => (
          <div className='item' key={}>
            <span className='item-name'>{}</span>
              onClick={() => removeItem(}

export default App;

3. The CSS code for src/App.js:

/* */
/* src/App.css */
.container {
    width: 80%;
    margin: 40px auto;

.list {
    margin-top: 30px;

.item {
    margin: 5px 0px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;

.item:hover {
    background: #ddd;

.item-name {
    font-size: 16px;

.delete-button {
    padding: 6px 10px;
    background: red;
    color: #fff;
    font-weight: bold;
    font-size: 19px;
    border: none;
    cursor: pointer;

.delete-button:hover {
    background: #c00;

4. Launch the app:

npm start


We’ve examined an end-to-end, thorough example that demonstrates how to eliminate items from a list. This is the foundation of knowledge that is indispensable when constructing modern web apps.

If you would like to explore more new and exciting stuff in React development, take a look at the following articles:

You can also check our React category page and React Native category page for the latest tutorials and examples.

Related Articles