From 9bad5284950dca2a1090984a29a224456ffea732 Mon Sep 17 00:00:00 2001
From: AKASH YADAV <yaakashyadav@outlook.com>
Date: Sat, 31 Jan 2026 00:36:43 +0530
Subject: [PATCH] Implement editing feature for Todo items

Added editing functionality to Todo items.
---
 TODO-LIST/src/components/Todo.jsx | 40 +++++++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/TODO-LIST/src/components/Todo.jsx b/TODO-LIST/src/components/Todo.jsx
index a1bee9e..cbba2e2 100644
--- a/TODO-LIST/src/components/Todo.jsx
+++ b/TODO-LIST/src/components/Todo.jsx
@@ -1,14 +1,46 @@
-import React from 'react'
+import React, { useState } from 'react'
+
+
+const Todo = ({ todo, deleteTodo, moveUp, moveDown, total, index }) => {
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [editText, setEditText] = useState(todo.text);
 
-const Todo = ({ todo,deleteTodo,moveUp,moveDown,total,index}) => {
     
     return (
         <div className='todo'>
-            <p className='text'>{todo.text}</p>
+            {isEditing ? (
+  <input
+    type="text"
+    value={editText}
+    onChange={(e) => setEditText(e.target.value)}
+  />
+) : (
+  <p className='text'>{todo.text}</p>
+)}
+
                 <div className='utils'>
                 <div className='go-up' style={{borderBottomColor:index === 0 ? 'grey' : '#1DA1F2'}} onClick={() => moveUp(todo.id)}></div>
                 <div className='go-down' style={{borderTopColor:index === total - 1 ? 'grey' : '#1DA1F2'}} onClick={() => moveDown(todo.id)}></div>
-                <div className='remove'  onClick={() => deleteTodo(todo.id)}></div>
+  <div className='remove' onClick={() => deleteTodo(todo.id)}></div>
+
+<div
+  className='edit'
+  onClick={() => setIsEditing(true)}
+>
+</div>
+
+{isEditing && (
+  <button
+    onClick={() => {
+      todo.text = editText;
+      setIsEditing(false);
+    }}
+  >
+    Save
+  </button>
+)}
+
             </div>
         </div>
     )