Criei a funcao editar toDo

TODO-LIST/src/pages/Home.jsx

@@ -1,5 +1,5 @@
-import React,{useState,useEffect} from 'react'
-import {nanoid} from 'nanoid'
+import React, { useState, useEffect } from 'react'
+import { nanoid } from 'nanoid'
 import Todo from '../components/Todo'
 
 const getTodos = () => {
@@ -17,7 +17,7 @@ const Home = () => {
     const addTodo = (e) => {
         e.preventDefault()
         if (todo && todos.findIndex(t => t.text === todo) === -1) {
-            setTodos(prev => [...prev, {id:nanoid(),text:todo}])
+            setTodos(prev => [...prev, { id: nanoid(), text: todo }])
             setTodo('')
         }
     }
@@ -45,31 +45,55 @@ const Home = () => {
             setTodos([...todos])
         }
     }
+
+    const editTodo = (id) => {
+        const todoToEdit = todos.find(t => t.id === id)
+        const newText = prompt("Edit your todo:", todoToEdit.text)
+        if (newText && newText.trim() !== "" && todos.findIndex(t => t.text === newText) === -1) {
+            setTodos(prev => prev.map(t => t.id === id ? { ...t, text: newText } : t))
+        }
+    }
+
     useEffect(() => {
         localStorage.setItem('todos', JSON.stringify(todos))
-    },[todos])
+    }, [todos])
 
     return (
-    <div className='home'>
-      <div className='container'>
-          <form className='todo-form' onSubmit={addTodo}>
-            <input type="text" placeholder='Add item...' value={todo} onChange={(e) => setTodo(e.target.value)}/>
-            <input type='button' onClick={addTodo} className='btn-addTodo' value='Add' />
-          </form>
-          {
-                todos.length? (
-            <div className='todo-list'>
-                {
-                    todos.map((todo,index) => {
-                        return <Todo key={todo.id} todo={todo} deleteTodo={deleteTodo} moveUp={moveUp} moveDown = {moveDown} total = {todos.length} index={index}/>
-                    })
-                }
-            </div> ) : <p style={{textAlign:'center', marginTop:'10px', fontWeight:'bold'}}>No todo...</p>
+        <div className='home'>
+            <div className='container'>
+                <form className='todo-form' onSubmit={addTodo}>
+                    <input
+                        type="text"
+                        placeholder='Add item...'
+                        value={todo}
+                        onChange={(e) => setTodo(e.target.value)}
+                    />
+                    <button type="submit" className='btn-addTodo'>Add</button>
+                </form>
 
-          }
-      </div>
-    </div>
-  )
+                {todos.length ? (
+                    <div className='todo-list'>
+                        {todos.map((todo, index) => (
+                            <Todo
+                                key={todo.id}
+                                todo={todo}
+                                deleteTodo={deleteTodo}
+                                moveUp={moveUp}
+                                moveDown={moveDown}
+                                editTodo={editTodo}
+                                total={todos.length}
+                                index={index}
+                            />
+                        ))}
+                    </div>
+                ) : (
+                    <p style={{ textAlign: 'center', marginTop: '10px', fontWeight: 'bold' }}>
+                        No todo...
+                    </p>
+                )}
+            </div>
+        </div>
+    )
 }
 
-export default Home
+export default Home