feat(ui): implement remove Todo functionality

redis-developer · Feb 20, 2021 · a24f9ac · a24f9ac
1 parent ee2ef67
commit a24f9ac
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/main/webapp/src/components/todo.js b/src/main/webapp/src/components/todo.js
@@ -2,14 +2,18 @@ import React, { useState, useEffect, useRef, useContext } from 'react';
 import { TodosContext } from "../context/todos_context";
 
 const Todo = function (props) {
-  const { getTodo, updateTodo }  = useContext(TodosContext);
+  const { getTodo, updateTodo, deleteTodo }  = useContext(TodosContext);
   const [todo, setTodo] = useState(getTodo(props.id));
 
   const toggleTodo = () => {
     todo.completed = !todo.completed;
     updateTodo(todo);
   }
 
+  const removeTodo = () => {
+    deleteTodo(props.id);
+  }
+
   return (
     <li>
       <div className="view">
@@ -21,6 +25,7 @@ const Todo = function (props) {
         <label>{todo.title}</label>
         <button
           className="destroy"
+          onClick={removeTodo}
         ></button>
       </div>
       <input