Read the Board and Form

Now trace one task from the data in App.jsx to the card you see in the browser.

Start with one task

In src/App.jsx, a task looks like this:

{
  id: "1",
  title: "Learn HTML",
  description: "Practice semantic HTML elements and page structure.",
  priority: "high",
  date: "2026-09-12",
  status: "todo"
}

The object contains the information the UI needs. The status determines which column should display it.

Follow the data into a column

App passes the complete task array to each Column:

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

Inside Column, the tasks are filtered using the column’s status:

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

The To Do column therefore keeps tasks whose status is todo.

Follow one task into a card

The matching tasks are mapped into TaskCard components:

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

The task object is passed as the task prop. TaskCard then reads values such as task.title and task.priority.

This gives us a simple flow:

App task data
    ↓
Column props
    ↓
filter by status
    ↓
TaskCard props
    ↓
visible task card

Read the form separately

Open src/components/TaskModal.jsx.

The form already has fields for:

• Title
• Description
• Priority
• Status
• Due date

Those fields are the beginning of the task-creation workflow. Later, React state will capture their values and an event handler will turn them into a new task object.

For now, do not add that behavior. The goal is to understand the path before we change it.

Checkpoint

Pick a sample task in the browser and trace it back to its object in App.jsx. Then identify which form field would supply each value when a new task is created.