TO-DO APP USING REACT, VITE, AND BOOTSTRAP - PART 5: DELETE AND UPDATE TASKS STATUS

In this last part of the tutorial, we will implement the ability to delete tasks and to toggle their status.

ALL PARTS:

1. To-Do App Using React, Vite, And Bootstrap: Set Up the Application
2. To-Do App Using React, Vite, And Bootstrap: Create Custom Components
3. To-Do App Using React, Vite, And Bootstrap: Create Tasks
4. To-Do App Using React, Vite, And Bootstrap: Edit Tasks
5. To-Do App Using React, Vite, And Bootstrap: Delete and Update Tasks Status

In the Task component, let's first add a delete button below the edit button:

<button className="btn btn-danger btn-sm ms-2">Delete</button>

Then, we'll create a handleDelete function:

const handleDelete = (id) => {
  setTasks([...tasks].filter((task) => task.id !== id));
};

This function filters out the task with the specified ID from the tasks array and updates the state using setTasks.

We must pass the tasks and setTasks props to the Task component:

const Task = ({
  task,
  setShowEdit,
  setEditedTaskId,
  setEditedTask,
  tasks,
  setTasks,
}) => {
   ...   
};

And we update the usage of this component in the Tasks component:

<Task
  key={task.id}
  task={task}
  setShowEdit={setShowEdit}
  setEditedTaskId={setEditedTaskId}
  setEditedTask={setEditedTask}
  tasks={tasks}
  setTasks={setTasks}
/>

Finally, we attach this function to the onClick event handler of the delete button:

<button
  className="btn btn-danger btn-sm ms-2"
  onClick={() => handleDelete(task.id)}
>
  Delete
</button>

The last thing we'll have to do is to implement the ability to toggle the task status. In the Task component, we'll add  a checkbox element  to represent the task status. After the opening <li> tag, let's add it:

<input type="checkbox" className="me-2" checked={task.completed} />

We passed the checked prop to the task but to be able to toggle between statuses, we must have an onChange handler. Let's write a function called toggleStatus. This function updates the status of the task when called:

const toggleStatus = (id) => {
  const updatedTask = { ...task, completed: !task.completed };
  const updatedTasks = tasks.map((task) =>
    task.id === id ? updatedTask : task
  );
  setTasks(updatedTasks);
};

Then we attach it to the onChange event handler:

<input
  type="checkbox"
  className="me-2"
  checked={task.completed}
  onChange={() => toggleStatus(task.id)}
/>

This implementation allows users to toggle the status of each task by checking or unchecking the checkbox associated with it.

CONCLUSION

In conclusion, we've successfully developed a task management application using React. Throughout this tutorial, we've covered various essential concepts and techniques, including:

1. Organizing components in a modular and reusable manner.
2. Managing state using the useState hook to enable dynamic updates and interactivity.
3. Utilizing React Bootstrap for building responsive and visually appealing UI components.
4. Implementing features such as adding, editing, deleting tasks, and toggling task status.
5. Persisting data using browser storage mechanisms like localStorage to ensure data persistence across sessions.

By following these steps, we've created a functional and user-friendly task management application that demonstrates the power and versatility of React. This tutorial serves as a solid foundation for further exploration and enhancement of React-based projects.