Как удалить элементы из списка в React

Удаление элементов из списка предполагает исключение определенных элементов из упорядоченного набора данных. В Python существует несколько методов удаления элементов из списка, каждый из которых имеет свои особенности и применение.

В этом уроке мы научимся удалять элементы из списка в React. Мы будем использовать хук useState и функциональные компоненты. Чтобы удалить элементы из списка в React, выполните следующие действия.

1. Создайте новый проект React:

npx create-react-app list-items example

<а я=0>2. Полный исходный код в 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 - Home' },
    { 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) => item.id !== id);
    setItems(updatedList);
  };

  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'>
        {items.map((item) => (
          <div className='item' key={item.id}>
            <span className='item-name'>{item.name}</span>
            <button
              className='delete-button'
              onClick={() => removeItem(item.id)}
            >
              X
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

<а я=0>3. Код CSS для 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. Запустите приложение:

npm start

Теперь запустите приложение и проверьте результаты.