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

Изменение статуса элемента списка в React

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

Основной подход

Используйте метод map, который проходит по каждому элементу массива и возвращает новый массив. Внутри колбэка найдите нужный элемент (например, по id) и верните его копию с измененным статусом. Для остальных элементов верните их без изменений.

const [items, setItems] = useState([
  { id: 1, status: 'active' },
  { id: 2, status: 'inactive' }
]);

const toggleStatus = (id) => {
  setItems(prevItems =>
    prevItems.map(item =>
      item.id === id
        ? { ...item, status: item.status === 'active' ? 'inactive' : 'active' }
        : item
    )
  );
};

Почему это важно

Иммутабельность гарантирует, что React может эффективно отслеживать изменения и перерисовывать только те компоненты, которые действительно изменились. Прямая мутация (например, items[0].status = 'new') не вызовет перерендер, так как ссылка на массив останется прежней.

Альтернативные методы

• findIndex + splice (не рекомендуется) — создает копию массива через spread, затем изменяет элемент по индексу.
• filter + concat — для удаления или добавления элементов, но не для обновления.

Вывод

Используйте map для обновления статуса элемента списка в React. Это простой, читаемый и соответствующий принципам иммутабельности способ, который гарантирует корректную работу виртуального DOM и предотвращает баги с состоянием.