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.

Implementing task deletion in the Kanban board

Implementing task deletion in the Kanban board

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

Implementing task deletion in the Kanban board

“

In this session, you will learn how to implement task deletion in our Kanban board, React project. By the end, you'll be able to delete individual tasks from any column using a delete button, either in the task editor or the viewer. This adds an essential level of control and flexibility for your users. Let's add a function for deleting tasks called deleteTask() in KanbanBoard.jsx. This function will soon house the logic for removing tasks. It accepts taskId as an argument, which we'll use to identify the task to be removed. Now I am filling in the body of our deleteTask() function. I'm using setColumns() to update the column state. Inside, I use the map function to iterate over each column, which creates a new array with updated columns. To preserve the existing column data while updating the tasks, I'm using the spread syntax within the mapped function. This ensures we don't lose any column information when we modify the tasks array. Let's add the tasks property to each column…

Contents