todoList is done

package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,11 +1,11 @@
 import "./App.css";
-// TODO: Import the todoData and pass it as a prop to the TodoList component
-
+import TodoList from "./component/TodoList";
+import todoData from './todoData'
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        {/* Call the TodoList Component Here */}
+        <TodoList todoData ={todoData}/>
       </header>
     </div>
   );

src/component/TodoItem.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+export const TodoItem = ({ todo, selectedTodo, handleDelete, handleEdit, handleSave,handleCancel }) => {
+    const [newTodoTitle,setNewTodoTitle]= useState("")
+    const handleTextChange=(event)=>{
+        setNewTodoTitle(event.target.value)
+    }
+    return (
+        todo.id === selectedTodo?.id ? <div><input type="text" defaultValue={ selectedTodo.title } onChange={handleTextChange}></input>
+            <sub style={ { color: "yellow", cursor: "pointer" } } onClick={ () => handleSave(todo.id,newTodoTitle) }
+            > save</sub>
+            <sub style={ { color: "red", cursor: "pointer" } } onClick={ () => handleCancel() }
+            > Cancel</sub>
+        </div> :
+            <div>
+                <p key={ todo.id }>
+                    { todo.title }</p>
+
+                <sub
+                    style={ { color: "red", cursor: "pointer" } }
+                    onClick={ () => handleDelete(todo.id) }
+                >
+                    Delete
+                </sub>
+                <sub style={ { color: "green", cursor: "pointer" } } onClick={ () => handleEdit(todo) }
+                > Edit</sub>
+
+            </div>
+    );
+};

src/component/TodoList.jsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { v4 as uuidv4 } from 'uuid'
+import { TodoItem } from "./TodoItem";
+function TodoList({todoData}){
+    const [todoList, setTodoList]=useState(todoData)
+    const [newTodo,setNewTodo]=useState("")
+    const [selectedTodo,setSelectedTodo]=useState()
+    // capture new to do
+    const handleTextChange =(event)=>{
+        setNewTodo(event.target.value)
+    }
+    //Adding new todo to the list
+    const handleTodoCreate=()=>{
+        const newTodoObj={
+            id :uuidv4(),
+            title: newTodo,
+            done: false
+        }
+        setTodoList([...todoList,newTodoObj])
+    }
+    //delete Function
+    const handleDelete=(todoId)=>{
+        setTodoList(todoList.filter((todo)=>todo.id !== todoId)) 
+    }
+    //edit Function
+    const handleEdit=(todo)=>{
+        setSelectedTodo(todo)
+    }
+    //Save Function
+    const handleSave=(todoId,newTodoTitle)=>{
+        const index = todoList.findIndex((todo)=>{
+        return todo.id ===todoId
+        })
+        if(index!== -1){
+            const clonedTodoList=[...todoList]
+            clonedTodoList[index].title = newTodoTitle
+            setTodoList(clonedTodoList)
+        }
+        setSelectedTodo(undefined)
+    }
+    //cancel Function
+    const handleCancel=()=> setSelectedTodo(undefined)
+
+    return <div>
+        <input type="text" placeholder="add your todo" onChange={handleTextChange}></input>
+        <button onClick={handleTodoCreate}>add</button>
+        {todoList.map((todo) => (
+    <TodoItem  key ={todo.id} todo={todo} selectedTodo={selectedTodo} handleDelete={handleDelete} handleEdit={handleEdit} 
+    handleSave={handleSave} handleCancel={handleCancel}/>))}
+    </div>;
+
+}
+export default TodoList