ToDoのstate管理方法の変更

src/App.tsx

@@ -1,27 +1,23 @@
 import { Container } from '@chakra-ui/react';
 import React, { useState } from 'react';
 
-import TodoInput from './conponents/TodoInput';
-import TodoList from './conponents/TodoList';
-
-type TodoType = {
-  title: string;
-};
+import TodoInput from '@/conponents/TodoInput';
+import TodoList from '@/conponents/TodoList';
+import { TodoType } from '@/types/TodoType';
 
 const initialTodos: TodoType[] = [
-  { title: '資料を作る' },
-  { title: '歯医者に行く' },
-  { title: '課題をやる' },
+  { id: '0', title: '資料を作る', isCompleted: false },
+  { id: '1', title: '歯医者に行く', isCompleted: false },
+  { id: '2', title: '課題をやる', isCompleted: false },
 ];
 
 const App = () => {
   const [todos, setTodos] = useState<TodoType[]>(initialTodos);
-  const [status, setStatus] = useState<boolean[]>([false, false, false]);
 
   return (
     <Container>
-      <TodoInput todos={todos} setTodos={setTodos} status={status} setStatus={setStatus} />
-      <TodoList todos={todos} setTodos={setTodos} status={status} setStatus={setStatus} />
+      <TodoInput todos={todos} setTodos={setTodos} />
+      <TodoList todos={todos} setTodos={setTodos} />
     </Container>
   );
 };

src/conponents/Todo.tsx

@@ -2,36 +2,32 @@ import { CloseIcon } from '@chakra-ui/icons';
 import { Flex, Spacer, Editable, EditablePreview, EditableInput, Checkbox } from '@chakra-ui/react';
 import React, { Dispatch, SetStateAction } from 'react';
 
-type TodoType = {
-  title: string;
-};
+import { TodoType } from '@/types/TodoType';
 
 type Props = {
   index: number;
   title: string;
   todos: TodoType[];
   setTodos: Dispatch<SetStateAction<TodoType[]>>;
-  status: boolean[];
-  setStatus: Dispatch<SetStateAction<boolean[]>>;
 };
 
-const Todo = ({ index, title, todos, setTodos, status, setStatus }: Props) => {
+const Todo = ({ index, title, todos, setTodos }: Props) => {
   const removeTodo = () => {
     const newTodos = todos.filter((_, i) => i !== index);
     setTodos(newTodos);
   };
 
   const handleStatus = () => {
-    const newStatus = [...status];
-    newStatus[index] = !newStatus[index];
-    setStatus(newStatus);
+    const newStatus = [...todos];
+    newStatus[index].isCompleted = !newStatus[index].isCompleted;
+    setTodos(newStatus);
   };
 
   return (
     <Flex align="center" w="90%" m="0 auto">
-      <Checkbox mr={2} onChange={() => handleStatus()} />
+      {<Checkbox mr={2} onChange={() => handleStatus()} />}
       <Editable defaultValue={title}>
-        {status[index] ? <EditablePreview as="s" /> : <EditablePreview />}
+        {todos[index].isCompleted ? <EditablePreview as="s" /> : <EditablePreview />}
         <EditableInput />
       </Editable>
       <Spacer />

src/conponents/TodoInput.tsx

@@ -1,18 +1,16 @@
 import { Input } from '@chakra-ui/react';
 import React, { useState, ChangeEvent, Dispatch, SetStateAction, KeyboardEvent } from 'react';
 
-type TodoType = {
-  title: string;
-};
+import { TodoType } from '@/types/TodoType';
 
 type Props = {
   todos: TodoType[];
   setTodos: Dispatch<SetStateAction<TodoType[]>>;
-  status: boolean[];
-  setStatus: Dispatch<SetStateAction<boolean[]>>;
 };
 
-const TodoInput = ({ todos, setTodos, status, setStatus }: Props) => {
+let num = 3;
+
+const TodoInput = ({ todos, setTodos }: Props) => {
   const [title, setTitle] = useState<string>('');
 
   return (
@@ -24,10 +22,9 @@ const TodoInput = ({ todos, setTodos, status, setStatus }: Props) => {
       onChange={(e: ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
       onKeyPress={(e: KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter') {
-          const newTodos = [...todos, { title: title }];
-          const newStatus = [...status, false];
+          const newTodos = [...todos, { id: String(num), title: title, isCompleted: false }];
           setTodos(newTodos);
-          setStatus(newStatus);
+          num++;
         }
       }}
     />

src/conponents/TodoList.tsx

@@ -3,30 +3,18 @@ import React, { Dispatch, SetStateAction } from 'react';
 
 import Todo from './Todo';
 
-type TodoType = {
-  title: string;
-};
+import { TodoType } from '@/types/TodoType';
 
 type Props = {
   todos: TodoType[];
   setTodos: Dispatch<SetStateAction<TodoType[]>>;
-  status: boolean[];
-  setStatus: Dispatch<SetStateAction<boolean[]>>;
 };
 
-const TodoList = ({ todos, setTodos, status, setStatus }: Props) => {
+const TodoList = ({ todos, setTodos }: Props) => {
   return (
     <Stack divider={<StackDivider borderColor="gray.200" />} spacing={4}>
       {todos.map((todo, i) => (
-        <Todo
-          key={todo.title}
-          index={i}
-          title={todo.title}
-          todos={todos}
-          setTodos={setTodos}
-          status={status}
-          setStatus={setStatus}
-        />
+        <Todo key={todo.id} index={i} title={todo.title} todos={todos} setTodos={setTodos} />
       ))}
     </Stack>
   );

src/types/TodoType.ts

@@ -0,0 +1,5 @@
+export type TodoType = {
+  id: string;
+  title: string;
+  isCompleted: boolean;
+};