From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Delete tasks

Delete tasks

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Delete tasks

“

Our aim in this session is to build the functionality to delete tasks from our to-do list application. I'll guide you through each step of the process. Get ready to enhance your to-do list app. To do that, we will create a function RemoveTask inside the App component because we need to have access to the task's state. We will then pass down the function as a prop to the TaskList component. And finally, we will pass it down to the task item as a prop and attach it to the task checkbox using the onClick property of the delete button. Moving to app.jsx. Now I am adding a new function called removeTask. This function takes a task's ID as an argument. It then uses the filter method to create a new array containing only the tasks that don't match the provided ID. The setTasks function then updates the state with this new filtered array. This efficiently removes the selected task from the to-do list. Okay, let's add the removeTask function as a prop to the TaskControls component. This allows…

Contents