Handle onRemoveTodo

Author: Duc Le

src/Todo.js

@@ -39,6 +39,17 @@ const Todo = () => {
  saveTodoItemsToLocalStorage('todo', newTodoItems)
  }, [todoItems]) // Dependencies list for useCallback
 
+ const removeTodoHandler = useCallback(id => {
+ // Filter out the todoItem which is about to be removed
+ const newTodoItems = todoItems.filter(todoItem => todoItem.id !== id)
+
+ // Update todoItems state
+ setTodoItems(newTodoItems)
+
+ // Save to localStorage
+ saveTodoItemsToLocalStorage('todo', newTodoItems)
+ }, [todoItems])
+
  return (
  <div className="todo">
  <h1>Todo</h1>
@@ -49,6 +60,7 @@ const Todo = () => {
 
  <TodoList
  todoItems={todoItems} // Passing todoItems to TodoList
+ onRemoveTodo={removeTodoHandler} // Passing addTodoHandler to TodoList
  />
  </div>
  );

src/components/TodoItem.js

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
-const TodoItem = ({ todo }) => (
- // TODO: we'll have more things to work with this components later.
- <li>
- {todo}
- </li>
-);
+const TodoItem = ({ todo, id, onRemoveTodo }) => {
+ const removeTodoHandler = useCallback(() => onRemoveTodo(id), [id, onRemoveTodo])
+
+ return (
+ <li>
+ <span>{todo}</span>
+ <button onClick={removeTodoHandler}>Remove</button>
+ </li>
+ )
+};
 
 export default TodoItem;

src/components/TodoList.js

@@ -3,7 +3,7 @@ import React from 'react';
 // COMPONENT
 import TodoItem from './TodoItem';
 
-const TodoList = ({ todoItems }) => (
+const TodoList = ({ todoItems, onRemoveTodo }) => (
  <ul>
  {
  todoItems && // Check if todoItems exists
@@ -12,7 +12,9 @@ const TodoList = ({ todoItems }) => (
  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}
  />
  ))
  }