기본 투두리스트 CRUD 코드

import React, { useState } from "react";

const Home = () => {
  const [todoList, setTodoList] = useState([
    {
      id: 0,
      title: "123",
      content: "456",
      isDone: false,
    },
    {
      id: 1,
      title: "123",
      content: "456",
      isDone: true,
    },
  ]);
  const [todo, setTodo] = useState({
    title: "",
    content: "",
  });
  const ChangeHanlder = (e) => {
    setTodo({
      ...todo,
      [e.target.name]: e.target.value,
    });
  };

  const SubmitHandler = (e) => {
    e.preventDefault();
    const newTodoList = [
      ...todoList,
      { ...todo, isDone: false, id: Date.now() },
    ];
    setTodoList(newTodoList);
  };

  const ToggleHandler = (id) => {
    console.log(id);
    const newTodoList = todoList.map((item) => {
      if (item.id == id) {
        item.isDone = !item.isDone;
      }
      return item;
    });
    setTodoList(newTodoList);
  };

  const DeleteHandler = (id) => {
    todoList.map((item, i, arr) => {
      if (item.id === id) {
        arr.splice(i, 1);
      }
    });
    setTodoList([...todoList]);
    console.log(todoList);
  };

  return (
    <div>
      <div>
        <h1>Todo List</h1>
        <input name='title' onChange={ChangeHanlder}></input>
        <input name='content' onChange={ChangeHanlder}></input>
        <button onClick={SubmitHandler}>제출</button>
      </div>
      <div>
        <h2>In Progress</h2>
        <div>
          {todoList
            .filter((item) => !item.isDone)
            .map((item) => {
              return (
                <ul>
                  <strong>{item.title}</strong>
                  <p>{item.content}</p>
                  <button onClick={() => ToggleHandler(item.id)}>완료</button>
                  <button onClick={() => DeleteHandler(item.id)}>삭제</button>
                </ul>
              );
            })}
        </div>
      </div>
      <h2>Done</h2>
      <div>
        {todoList
          .filter((item) => item.isDone)
          .map((item) => {
            return (
              <ul>
                <strong>{item.title}</strong>
                <p>{item.content}</p>
                <button onClick={() => ToggleHandler(item.id)}>취소</button>
                <button onClick={() => DeleteHandler(item.id)}>삭제</button>
              </ul>
            );
          })}
      </div>
    </div>
  );
};

export default Home;