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.

Toggle task completion

Toggle task completion

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

Toggle task completion

“

Our aim in this session is to build the functionality to toggle task completion in our to-do list application. This means the user will be able to update a task and set it to complete or incomplete. Let's start where we left off in the Task Item component. To do that, we will create a function ToggleTaskDone 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 onChange property. Moving to app.jsx. Now I am adding a new function called toggleTaskDone. This function will be responsible for changing the done status of a task. Let's implement our function. I use the map function to iterate through the tasks array. For each task, I check if its ID matches the provided ID. If there's a match, I create a new object using the spread syntax and toggle the done property. Otherwise, I keep the…

Contents