App.js

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

const App = () => {
  const [todoList, setTodoList] = useState([]);

  const [todoName, setTodoName] = useState('');

  const addTodo = (e) => {
    e.preventDefault();
    setTodoList(prevList => {
      const newTodo = {
        name: todoName,
        id: prevList.length + 1,
        done: false,
      }
      return [newTodo, ...prevList];
    });
    setTodoName('');
  }

  const removeTodo = (id) => {
    setTodoList(prevList => {
      return prevList.filter((item) => item.id !== id);
    })
  }

  const toggleTodo = (id) => {
    setTodoList(prevList => {
      return prevList.map((item) => {
        if (item.id === id) {
          item.done = !item.done;
        }
        return item;
      });
    })
  }

  const changeTodoName = (e) => {
    setTodoName(e.target.value);
  }

  return (
    <div className="container">
      <form onSubmit={addTodo}>
        <input
          placeholder="Add todo"
          value={todoName}
          onChange={changeTodoName}
        />
      </form>
      <ul>
        {todoList.map((todo) => (
          <li
            key={todo.id}
          >
            <button onClick={() => removeTodo(todo.id)}>&times;</button>
            <span className={todo.done ? 'done todo-name' : 'todo-name'} onClick={() => toggleTodo(todo.id)}>{todo.name}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default App;