Skip to content

Instantly share code, notes, and snippets.

@alvnfaiz
Created August 23, 2021 08:47
Show Gist options
  • Save alvnfaiz/526252ea3756daabcf1bf0a733021e20 to your computer and use it in GitHub Desktop.
Save alvnfaiz/526252ea3756daabcf1bf0a733021e20 to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment