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.

Adding tasks

Adding 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

Adding tasks

“

Welcome to this session on adding tasks to your Kanban board React project. By the end of this session, you'll be able to add new tasks to any column using the Add button and see the column's task list update dynamically. Let's get started. Now I'm adding a new div below the header to hold the task count and the Add Task button. This div will house the elements for displaying the number of tasks and the button to add new tasks. Inside the newly added div, I am creating a span element. This span will be used to display the number of tasks in the column. I am now populating the span with the actual task count by accessing column.tasks.length. This will dynamically display the correct number of tasks. To improve readability, I'm adding a space after the task count in the span element. Now you will see how I'm dynamically adding the word task or tasks, depending on the count. I use a ternary operator to check if column.tasks.length is equal to 1. If it is, I display task. Otherwise, I…

Contents