Delete a Task

The task card already has a menu button. We will turn that UI element into a simple delete action for the practice project.

1. Create a delete handler in App

The parent owns the task list, so deletion belongs there:

function deleteTask(taskId) {
  setTasks((current) =>
    current.filter((task) => task.id !== taskId)
  );
}

The filter creates a new array containing every task except the one whose id matches.

2. Pass the callback to the column

Give each column the same callback:

<Column
  title="To Do"
  status="todo"
  tasks={tasks}
  onDeleteTask={deleteTask}
/>

Repeat it for the other columns.

3. Pass it through to TaskCard

Column already knows which task it is rendering, so it can pass both the callback and the task id to the card.

The card can then call the callback when its button is clicked.

4. Keep the child simple

TaskCard should not filter the task list itself. It only needs to say, in effect, “the user clicked delete for this task.”

Checkpoint

Delete one task from each column. The task should disappear immediately and the column count should update because both are derived from the same tasks state.