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.

Editing tasks inline

Editing tasks inline

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

Editing tasks inline

“

Welcome to the Editing Tasks Inline session. In this lecture, we'll enhance our Kanban board project by adding the ability to edit tasks directly within the board. By the end, you'll be able to seamlessly switch between viewing and editing tasks, modify task content using an input field, save or cancel changes, and update the board state immutably. Now I am adding the UpdateTask function. This function will be responsible for updating the content of a specific task. Let's implement the UpdateTask function. I am starting by mapping over the columns array using SetColumns. Now I spread the current column, Call, into a new object using the Spread syntax. This This ensures we maintain the existing column properties while updating only the tasks. I am now adding the tasks property to the new column object. The tasks property is generated by mapping over the existing call.tasks array. This way, we're also updating the tasks immutably. Inside the col.tasks.map function, I am adding a…

Contents