Todo list.js

import React,{useState} from 'react'
import { ACTIONS } from './App';
 
function ListOfTodo({todo, dispatch}) {
    const [isEdit, setIsEdit] = useState(false);
    const [newTask, setNewTask] = useState(todo.name);
 
    const handleSave=()=>{
        dispatch({type: ACTIONS.EDIT_TODO, payload: {id: todo.id, name: newTask}});
        setIsEdit(false);
    }
 
    return (
        <li>
            {!isEdit && todo.name}
           {isEdit ?
           <>
            <input type="text" value={newTask} onChange={e => setNewTask(e.target.value)}/>
            <button onClick={handleSave}>save</button>
            </>
            :
            <button onClick={() => setIsEdit(true)}>edit</button>
        }
           <button onClick={() => dispatch({type: ACTIONS.DELETE_TODO, payload: {id: todo.id}})}>delete</button>
        </li>
    )
}
 
export default ListOfTodo