Handle onEditTodo

Author: Duc Le

src/Todo.js

@@ -37,6 +37,7 @@ const Todo = () => {
 
  // Save to localStorage
  saveTodoItemsToLocalStorage('todo', newTodoItems)
+ console.log(newTodoItems)
  }, [todoItems]) // Dependencies list for useCallback
 
  const removeTodoHandler = useCallback(id => {
@@ -62,18 +63,30 @@ const Todo = () => {
 
  }, [todoItems])
 
+ const editTodoHandler = useCallback((id, todo) => {
+ const editingTodo = todoItems.find(todoItem => todoItem.id === id)
+ editingTodo.todo = todo
+ // Update todoItems state
+ setTodoItems([...todoItems])
+
+ // Save to localStorage
+ saveTodoItemsToLocalStorage('todo', todoItems)
+ 
+ }, [todoItems])
+
  return (
  <div className="todo">
  <h1>Todo</h1>
 
  <AddNewTodoForm
- onAddTodo={addTodoHandler} // Passing addTodoHandler to AddNewTodoForm
+ onAddTodo={addTodoHandler} // Passing down addTodoHandler
  />
 
  <TodoList
- todoItems={todoItems} // Passing todoItems to TodoList
- onRemoveTodo={removeTodoHandler} // Passing removeTodoHandler to TodoList
- onToggleTodoDone={toggleTodoDoneHandler} // Passing toggleTodoDoneHandler to TodoList
+ todoItems={todoItems} // Passing down todoItems
+ onRemoveTodo={removeTodoHandler} // Passing down removeTodoHandler
+ onToggleTodoDone={toggleTodoDoneHandler} // Passing down toggleTodoDoneHandler
+ onEditTodo={editTodoHandler} // Passing down editTodoHandler
  />
  </div>
  );

src/components/TodoItem.js

@@ -1,13 +1,26 @@
 import React, { useCallback } from 'react';
 
-const TodoItem = ({ todo, id, onRemoveTodo, onToggleTodoDone, isDone }) => {
+const TodoItem = ({ todo, id, onRemoveTodo, onToggleTodoDone, onEditTodo, isDone }) => {
  const removeTodoHandler = useCallback(() => onRemoveTodo(id), [id, onRemoveTodo])
 
  const toggleTodoDoneHandler = useCallback(() => onToggleTodoDone(id), [id, onToggleTodoDone])
+ const editTodoHandler = useCallback(event => {
+ if (event.keyCode === 13) { // Detect ENTER key down
+ event.preventDefault(); // Prevent adding a new line because it's supposed to be single line
+ onEditTodo(id, event.target.value);
+ event.target.blur(); // Make the current input lost focus after finishing onEditTodo
+ }
+ }, [id, onEditTodo])
 
  return (
  <li>
- <span style={{textDecoration: isDone ? 'line-through' : 'none'}}>{todo}</span>
+ <input
+ defaultValue={todo} // innerHTML of the editable div
+ disabled={false} // use true to disable editing
+ onKeyDown={editTodoHandler} // handle innerHTML change
+ tagName='span' // Use a custom HTML tag (uses a div by default)
+ style={{textDecoration: isDone ? 'line-through' : 'none'}}
+ />
  <button onClick={removeTodoHandler}>Remove</button>
  <button onClick={toggleTodoDoneHandler}>{`Mark as ${isDone ? 'pending': 'done'}`}</button>
  </li>

src/components/TodoList.js

@@ -3,7 +3,7 @@ import React from 'react';
 // COMPONENT
 import TodoItem from './TodoItem';
 
-const TodoList = ({ todoItems, onRemoveTodo, onToggleTodoDone }) => {
+const TodoList = ({ todoItems, onRemoveTodo, onToggleTodoDone, onEditTodo }) => {
  return (
  <ul>
  {
@@ -17,6 +17,7 @@ const TodoList = ({ todoItems, onRemoveTodo, onToggleTodoDone }) => {
  todo={todo}
  onRemoveTodo={onRemoveTodo}
  onToggleTodoDone={onToggleTodoDone}
+ onEditTodo={onEditTodo}
  isDone={isDone}
  />
  ))