Простой код приложения списка дел с использованием React

Вот пример кода простого приложения со списком дел на React:

import React, { useState } from 'react';
function TodoList() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);
  const handleInputChange = (event) => {
    setTask(event.target.value);
  };
  const handleAddTask = () => {
    if (task.trim() !== '') {
      setTasks([...tasks, task]);
      setTask('');
    }
  };
  const handleDeleteTask = (index) => {
    const newTasks = [...tasks];
    newTasks.splice(index, 1);
    setTasks(newTasks);
  };
  return (
    <div>
      <h2>Todo List</h2>
      <input type="text" value={task} onChange={handleInputChange} />
      <button onClick={handleAddTask}>Add Task</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => handleDeleteTask(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default TodoList;

Этот код устанавливает компонент TodoList, используя синтаксис функциональных компонентов React. Он использует перехватчики React (useState) для управления состоянием ввода задачи и списком задач. Функция handleInputChangeобновляет входное значение задачи при каждом его изменении, а handleAddTaskдобавляет новую задачу в список при нажатии кнопки «Добавить задачу». Функция handleDeleteTaskудаляет задачу из списка при нажатии соответствующей кнопки «Удалить».