Make the Board Interactive

The board now renders from React state. The next step is to give users a way to change that state.

In this module you will connect the existing UI to event handlers and callbacks. You will build the features in this order:

1. Manage the form fields with React state.
2. Open and close the task modal.
3. Create a new task and add it to the board.
4. Delete an existing task.
5. Make tasks draggable.
6. Drop a task onto a column and update its status.
7. Show a visible drop-zone highlight while dragging.

The goal is not just to make buttons work. You will practice the React flow behind them:

user event
   ↓
handler / callback
   ↓
setTasks(...)
   ↓
React re-renders
   ↓
updated UI

Checkpoint

Before starting, remember that child components should not directly own the application’s task list. They should report user actions to App, where the shared state lives.