Как реализовать переключение статуса задачи?

Управление состоянием задач в React

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

Пример реализации

Рассмотрим простой компонент TodoList, который отображает список задач и позволяет переключать их статус с 'выполнено' на 'не выполнено' и обратно.

import React, { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Изучить React', completed: false },
    { id: 2, text: 'Написать код', completed: true }
  ]);

  const toggleTask = (taskId) => {
    setTasks(prevTasks =>
      prevTasks.map(task =>
        task.id === taskId
          ? { ...task, completed: !task.completed }
          : task
      )
    );
  };

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          <input
            type="checkbox"
            checked={task.completed}
            onChange={() => toggleTask(task.id)}
          />
          {task.text}
        </li>
      ))}
    </ul>
  );
}

Ключевые моменты

• Используется функциональная форма setState (prevTasks => ...), чтобы гарантировать актуальность предыдущего состояния.
• Метод map создаёт новый массив, не мутируя исходный, что соответствует принципам иммутабельности в React.
• Оператор spread (...task) копирует все свойства задачи, а затем переопределяется только completed.

Вывод

Такой подход применяется в любых React-приложениях, где нужно управлять списками данных с возможностью изменения отдельных элементов. Он прост, эффективен и легко масштабируется на более сложные сценарии, например, с использованием Redux или Context API.