From 585c3157b350468eab14cee240707f36c6d65d3e Mon Sep 17 00:00:00 2001
From: getchards <kazansasha02@gmail.com>
Date: Sun, 25 Aug 2024 00:16:40 +0300
Subject: [PATCH] improvements

---
 src/components/TodoItem/TodoItem.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx
index fa25b4484..e51c01862 100644
--- a/src/components/TodoItem/TodoItem.tsx
+++ b/src/components/TodoItem/TodoItem.tsx
@@ -8,14 +8,15 @@ type Props = {
 };
 
 export const TodoItem: React.FC<Props> = ({ todo }) => {
+  const { completed, id, title } = todo;
   const { toggleTodo, deleteTodo, updateTodo } = useTodos();
   const [isEditing, setIsEditing] = useState(false);
-  const [editedTitle, setEditedTitle] = useState(todo.title);
+  const [editedTitle, setEditedTitle] = useState(title);
 
   const inputElement = useRef<HTMLInputElement>(null);
 
   const handleTodoStatus = () => {
-    toggleTodo(todo.id);
+    toggleTodo(id);
   };
 
   const handleDeleteTodo = () => {
@@ -32,9 +33,9 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
 
   const handleEditSubmit = () => {
     if (editedTitle.trim() === '') {
-      deleteTodo(todo.id);
+      deleteTodo(id);
     } else {
-      updateTodo(todo.id, { title: editedTitle.trim() });
+      updateTodo(id, { title: editedTitle.trim() });
     }
 
     setIsEditing(false);
@@ -44,7 +45,7 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
     if (event.key === 'Enter') {
       handleEditSubmit();
     } else if (event.key === 'Escape') {
-      setEditedTitle(todo.title);
+      setEditedTitle(title);
       setIsEditing(false);
     }
   };
@@ -58,7 +59,7 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
   return (
     <div
       data-cy="Todo"
-      className={classNames('todo', { completed: todo.completed })}
+      className={classNames('todo', { completed: completed })}
     >
       <label className="todo__status-label">
         <input
@@ -66,7 +67,7 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
           type="checkbox"
           className="todo__status"
           onClick={handleTodoStatus}
-          checked={todo.completed}
+          checked={completed}
         />
       </label>
 
@@ -86,7 +87,7 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
           className="todo__title"
           onDoubleClick={startEdit}
         >
-          {todo.title}
+          {title}
         </span>
       )}
       {!isEditing && (