Как реализовать добавление и удаление элементов в списке в React?

В React управление динамическими списками — одна из фундаментальных задач. Поскольку React полагается на декларативный подход, вы описываете, как UI должен выглядеть в зависимости от состояния, а React сам заботится об обновлении DOM. Для работы со списками состояние (state) хранит массив данных, а рендеринг осуществляется с помощью метода map.

Базовый подход с состоянием

В функциональном компоненте используйте хук useState для хранения массива элементов. Инициализируйте его пустым массивом или начальными данными.

import React, { useState } from 'react';

function TodoList() {
  const [items, setItems] = useState(['Item 1', 'Item 2']);
  // ... логика добавления/удаления
}

Добавление элемента

Чтобы добавить элемент, создайте новый массив, содержащий все существующие элементы и новый. Никогда не модифицируйте исходный массив методами push или splice напрямую, так как React не обнаружит изменения. Вместо этого используйте spread-оператор или concat.

const addItem = (newItem) => {
  setItems([...items, newItem]); // Spread-оператор
  // Или: setItems(items.concat(newItem));
};

// Пример вызова: addItem('Item 3');

Удаление элемента

Для удаления элемента по индексу или уникальному идентификатору (например, id) используйте метод filter, который возвращает новый массив без указанного элемента.

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

// Если нет id, можно удалить по индексу (менее надёжно):
// const removeItemByIndex = (index) => {
//   setItems(items.filter((_, i) => i !== index));
// };

Рендеринг списка

Для отображения списка используйте map, присваивая каждому элементу уникальный key (обычно id или индекс, если элементы статичны). Key помогает React эффективно обновлять DOM.

return (
  
    {items.map((item, index) => (
      
        {item.name}
         removeItem(item.id)}>Delete
      
    ))}
  
);

Где это применяется

Этот паттерн используется повсеместно в интерфейсах: списки задач (todo), корзины товаров, ленты новостей, таблицы данных. Важно помнить о неизменяемости (immutability) состояния — всегда создавайте новые массивы или объекты при обновлении, чтобы React корректно определял изменения и оптимизировал ререндеры.

Вывод: Используйте useState для хранения массива, spread-оператор или concat для добавления, filter для удаления и map для рендеринга. Этот подход обеспечивает предсказуемое обновление UI и является стандартом в React-разработке.