Add delete when click row

Author: nicorithner

react-todos/src/App.js

@@ -27,12 +27,19 @@ function App() {
     setTodos((todos) => [...todos, newTodo]);
   };
 
+  const deleteTodo = (deleteTodoRowNumber) => {
+    let filtered = todos.filter(function (value) {
+      return value.rowNumber !== deleteTodoRowNumber;
+    });
+    setTodos(filtered);
+  };
+
   return (
     <div className="mt-5 container">
       <div className="card">
         <div className="card-header">Your Todo's</div>
         <div className="card-body">
-          <TodoTable todos={todos} />
+          <TodoTable todos={todos} deleteTodo={deleteTodo} />
           <NewTodoForm addTodo={addTodo} />
         </div>
       </div>

react-todos/src/components/TodoRowItem.js

@@ -1,6 +1,6 @@
 export default function TodoRowItem(props) {
   return (
-    <tr>
+    <tr onClick={() => props.deleteTodo(props.rowNumber)}>
       <th scope="row">{props.rowNumber}</th>
       <td>{props.rowDescription}</td>
       <td>{props.rowAssigned}</td>

react-todos/src/components/TodoTable.js

@@ -17,6 +17,7 @@ export default function TodoTable(props) {
             rowNumber={todo.rowNumber}
             rowDescription={todo.rowDescription}
             rowAssigned={todo.rowAssigned}
+            deleteTodo={props.deleteTodo}
           />
         ))}
       </tbody>