solution

Author: minimal005

src/components/TodoItem.1.tsx

@@ -1,4 +1,8 @@
-import { Dispatch, SetStateAction } from 'react';
+import React, { useContext, Dispatch, SetStateAction } from 'react';
+import { TodoContext } from '../store/TodoContext';
+import { useTodoItem } from '../hooks/useTodoItem';
+
+import cn from 'classnames';
 
 import { Todo } from '../types/Todo';
 
@@ -8,40 +12,17 @@ export type Props = {
   setShowEditId: Dispatch<SetStateAction<number | null>>;
 };
 
-import cn from 'classnames';
-import React, { useContext, useState } from 'react';
-import { TodoContext } from '../store/TodoContext';
-
 export const TodoItem: React.FC<Props> = ({
   todo,
   showEditId,
   setShowEditId,
 }) => {
-  const { changeComplete, handleDeleteTodo, editTitle, setIsDeleted } =
-    useContext(TodoContext);
-
-  const [title, setTitle] = useState(todo.title);
-
-  const handleSubmitEditedTodo = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!title.trim().length) {
-      handleDeleteTodo(todo);
-      setIsDeleted(true);
-    } else if (title.trim() === todo.title) {
-      setShowEditId(null);
-    } else if (showEditId && title.trim()) {
-      editTitle(todo, title);
-      setShowEditId(null);
-    }
-  };
-
-  const handleEscape = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      setTitle(todo.title);
-      setShowEditId(null);
-    }
-  };
+  const { changeComplete, handleDeleteTodo } = useContext(TodoContext);
+  const { handleEscape, handleSubmitEditedTodo, title, setTitle } = useTodoItem(
+    todo,
+    setShowEditId,
+    showEditId,
+  );
 
   return (
     <div data-cy="Todo" className={cn('todo', { completed: todo.completed })}>

src/components/TodoItem.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useState } from 'react';
 
-// import { TodoItem } from './TodoItem';
 import { TodoContext } from '../store/TodoContext';
 import { TodoItem } from './TodoItem';
 

src/components/TodoList.tsx

@@ -0,0 +1,36 @@
+import React, { Dispatch, SetStateAction, useContext, useState } from 'react';
+import { TodoContext } from '../store/TodoContext';
+import { Todo } from '../types/Todo';
+
+export const useTodoItem = (
+  todo: Todo,
+  setShowEditId: Dispatch<SetStateAction<number | null>>,
+  showEditId: boolean,
+) => {
+  const [title, setTitle] = useState(todo.title);
+
+  const { editTitle, setIsDeleted, handleDeleteTodo } = useContext(TodoContext);
+
+  const handleSubmitEditedTodo = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!title.trim().length) {
+      handleDeleteTodo(todo);
+      setIsDeleted(true);
+    } else if (title.trim() === todo.title) {
+      setShowEditId(null);
+    } else if (showEditId && title.trim()) {
+      editTitle(todo, title);
+      setShowEditId(null);
+    }
+  };
+
+  const handleEscape = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setTitle(todo.title);
+      setShowEditId(null);
+    }
+  };
+
+  return { handleEscape, handleSubmitEditedTodo, title, setTitle };
+};

src/hooks/useTodoItem.tsx

@@ -6,15 +6,16 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-
-import { Todo } from '../types/Todo';
-import { Field } from '../types/Field';
 import {
   getLocaleStorageTodos,
   setLocaleStorageTodos,
 } from '../utils/localStorageTodos';
+
 import { filterByTodos, filteredTodos } from '../service/service';
 
+import { Todo } from '../types/Todo';
+import { Field } from '../types/Field';
+
 type TodoContextType = {
   todos: Todo[];
   field: Field;
@@ -153,7 +154,6 @@ export const TodoProvider: React.FC<Props> = ({ children }) => {
       editField,
       changeComplete,
       changeCompleteAll,
-
       deleteCompletedTodos,
     }),
     [