Handle OnToggleTodoDone

Author: Duc Le

src/Todo.js

@@ -50,6 +50,18 @@ const Todo = () => {
  saveTodoItemsToLocalStorage('todo', newTodoItems)
  }, [todoItems])
 
+ const toggleTodoDoneHandler = useCallback(id => {
+ const todo = todoItems.find(todoItem => todoItem.id === id)
+ todo.isDone = !todo.isDone
+
+ // Update todoItems state
+ setTodoItems([...todoItems])
+
+ // Save to localStorage
+ saveTodoItemsToLocalStorage('todo', todoItems)
+
+ }, [todoItems])
+
  return (
  <div className="todo">
  <h1>Todo</h1>
@@ -60,10 +72,11 @@ const Todo = () => {
 
  <TodoList
  todoItems={todoItems} // Passing todoItems to TodoList
- onRemoveTodo={removeTodoHandler} // Passing addTodoHandler to TodoList
+ onRemoveTodo={removeTodoHandler} // Passing removeTodoHandler to TodoList
+ onToggleTodoDone={toggleTodoDoneHandler} // Passing toggleTodoDoneHandler to TodoList
  />
  </div>
  );
 }
 
-export default Todo;
+export default React.memo(Todo);

src/components/AddNewTodoForm.js

@@ -52,4 +52,4 @@ const AddNewTodoForm = ({ onAddTodo }) => {
  )
 };
 
-export default AddNewTodoForm;
+export default React.memo(AddNewTodoForm);

src/components/TodoItem.js

@@ -1,14 +1,17 @@
 import React, { useCallback } from 'react';
 
-const TodoItem = ({ todo, id, onRemoveTodo }) => {
+const TodoItem = ({ todo, id, onRemoveTodo, onToggleTodoDone, isDone }) => {
  const removeTodoHandler = useCallback(() => onRemoveTodo(id), [id, onRemoveTodo])
 
+ const toggleTodoDoneHandler = useCallback(() => onToggleTodoDone(id), [id, onToggleTodoDone])
+
  return (
  <li>
- <span>{todo}</span>
+ <span style={{textDecoration: isDone ? 'line-through' : 'none'}}>{todo}</span>
  <button onClick={removeTodoHandler}>Remove</button>
+ <button onClick={toggleTodoDoneHandler}>{`Mark as ${isDone ? 'pending': 'done'}`}</button>
  </li>
  )
 };
 
-export default TodoItem;
+export default React.memo(TodoItem);

src/components/TodoList.js

@@ -3,22 +3,26 @@ import React from 'react';
 // COMPONENT
 import TodoItem from './TodoItem';
 
-const TodoList = ({ todoItems, onRemoveTodo }) => (
- <ul>
- {
- todoItems && // Check if todoItems exists
- Array.isArray(todoItems) && // Check if it's an array
- todoItems.length > 0 && // The array should not be empty
- todoItems.map(({ id, todo }) => ( // If all conditions are met, we render a list of todo items
- <TodoItem
- key={id}
- id={id}
- todo={todo}
- onRemoveTodo={onRemoveTodo}
- />
- ))
- }
- </ul>
-);
+const TodoList = ({ todoItems, onRemoveTodo, onToggleTodoDone }) => {
+ return (
+ <ul>
+ {
+ todoItems && // Check if todoItems exists
+ Array.isArray(todoItems) && // Check if it's an array
+ todoItems.length > 0 && // The array should not be empty
+ todoItems.map(({ id, todo, isDone }) => ( // If all conditions are met, we render a list of todo items
+ <TodoItem
+ key={id}
+ id={id}
+ todo={todo}
+ onRemoveTodo={onRemoveTodo}
+ onToggleTodoDone={onToggleTodoDone}
+ isDone={isDone}
+ />
+ ))
+ }
+ </ul>
+ )
+};
 
-export default TodoList;
+export default React.memo(TodoList);