Render the Board from State

React becomes useful when changing state causes the UI to render from the new value. The board already has the rendering logic; now we will make the relationship explicit.

1. Keep one task list

Do not create separate state values for To Do, In Progress, and Done. Keep one array:

[
  task,
  task,
  task,
  ...
]

Each task carries its own status.

2. Let each column derive its list

Column.jsx already contains:

const columnTasks = tasks.filter((task) => task.status === status);

This is derived data. The column does not need to store another state value for its visible tasks.

If a task’s status changes later, React will render the column again and the filter will produce a different result automatically.

3. Render cards from the filtered list

The existing map is also derived rendering:

{columnTasks.map((task) => (
  <TaskCard key={task.id} task={task} />
))}

There is no need to manually tell the DOM which card to move. The data determines the result.

4. Understand the render cycle

The important mental model is:

state changes
   ↓
React renders again
   ↓
Column filters current tasks
   ↓
TaskCard receives current task
   ↓
UI matches state

Checkpoint

Temporarily change one starter task’s status value in the initial data. When you refresh, that task should appear in a different column without changing the column component.

That small experiment demonstrates why status should be data, not a separate piece of UI logic.