v2 Delta 2.0

Initialized another component TaskCard to be responsible for showing each piece of tasks and created task delete funcionality

Author: yunusparvezkhan

src/App.js

@@ -25,10 +25,20 @@ function App() {
     )
   })
 
+  const deleteTaskById = (id) => {
+    const delUpdatedTasks = [
+      ...tasks.filter((task) => {
+        return task.id !== id;
+      })
+    ];
+
+    setTasks(delUpdatedTasks);
+  }
+
   return (
     <div className="app">
       <h1 className="title" >Tasker App</h1>
-      <TaskList tasks={tasks} />
+      <TaskList tasks={tasks} deleteTaskById={deleteTaskById} />
       <TaskCreate onCreate={createTask} />
     </div>
   );

src/components/TaskCard.js

@@ -1,9 +1,12 @@
 import React from 'react';
 
-const TaskCard = ({ task }) => {
+const TaskCard = ({ task, deleteTaskById }) => {
     return (
         <div>
-            <div className='book-show' key={task.id}>{task.id}. {task.title}</div>
+            <div className='book-show' key={task.id}>
+                {task.id}. {task.title}
+                <button onClick={() => deleteTaskById(task.id)}>delete</button>
+            </div>
         </div>
     )
 }

src/components/TaskList.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import TaskCard from './TaskCard';
 
-const TaskList = ({ tasks }) => {
+const TaskList = ({ tasks, deleteTaskById }) => {
     const renderTask = tasks.map((task) => {
         return (
             // <div key={task.id}>{task.id}. {task.title}</div>
-            <TaskCard key={task.id} task={task} />
+            <TaskCard key={task.id} task={task} deleteTaskById={deleteTaskById} />
         )
     })
     return (