React JS: компонент список дел

Простой React JS компонент, список дел, он же todo list. С возможностью удаления и чекбоксом для перечеркивания элементов в списке.

Компонент будет состоять из двух файлов, первый это основной компонент TodoApp, второй это каждый элемент списка.

Компонент: элемент списка

TodoItem.jsx

import React from 'react';

export default function TodoItem({
 onDelete,
 onComplete,
 item,
}) {
 return (
   <div>
     <input
       type="checkbox"
       checked={item.completed}
       onChange={() => onComplete(item)}
     />
     <span

       style={{
         textDecoration: item.completed
           ? "line-through"
           : "none",
       }}
     >
       {item.todo}
     </span>
     <button onClick={() => onDelete(item)}>
       Delete
     </button>
   </div>
 );
}

Основной компонент: список дел

Импортируем верхний компонент в основной, и пишем основную логику работы. Добавление, удаление и перечеркивание элементов списка.

App.jsx

import React, { useState } from 'react';
import TodoItem from './TodoItem';

export function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [todo, setTodo] = useState('');

  const addTodo = () => {
    setTodos([...todos, { todo, completed: false }]);
    setTodo('');
  };

  const deleteTodo = item => {
    setTodos(todos.filter(todo => todo !== item));
  };

  const completeTodo = item => {
    setTodos(
      todos.map(todo =>
        todo === item ? { ...todo, completed: !todo.completed } : todo

      )
    );
  };

  return (
    <div>
      <h1>Todo App</h1>
      <input type='text' value={todo} onChange={e => setTodo(e.target.value)} />
      <button onClick={addTodo}>Add</button>
      {todos.map((item, index) => (
        <TodoItem

          key={index}
          onDelete={deleteTodo}
          onComplete={completeTodo}
          item={item}
        />
      ))}
    </div>
  );
}

Стилизуйте под свои нужды при помощи css или используйте готовые библиотеки.