Follow Props Through the Component Tree

Once App owns the state, the next question is simple: how does a task get from state to the screen?

React components pass data down through props. This project uses that pattern at two levels.

From App to Column

App gives each column the full task list plus the status that identifies the column:

<Column title="In Progress" status="progress" tasks={tasks} />

The column does not own the complete task list. It receives what it needs from its parent.

From Column to TaskCard

Column.jsx already turns matching tasks into cards:

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

Here, one task becomes the task prop for one card.

Why this matters

Each component has a focused job:

• App owns application state.
• Column decides which tasks belong in its column.
• TaskCard displays one task.

Do not move the entire task list into TaskCard. A card should not need to know about every other task on the board.

Checkpoint

Pick one sample task and trace it through the application:

`tasks` in App
   ↓
`tasks` prop on Column
   ↓
`columnTasks`
   ↓
`task` prop on TaskCard
   ↓
task title / description / priority / date

If that flow makes sense, the next step is to make the rendered UI explicitly depend on state changes.