Plan the Task Data

Before introducing React state, make the task shape explicit. A consistent object makes rendering and later actions much easier to reason about.

The task shape

The starter already uses this structure:

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

Each property has a specific job:

Why id matters

The id will become especially important when we start changing individual tasks. React also uses it as the key when rendering a list of cards.

Avoid using the array index as the task identity. A task needs an identity that stays with it when tasks are moved between columns.

Why status belongs to the task

The board does not need three separate task arrays. Each task carries its own status, and each column derives its visible list from that value.

That makes a move conceptually simple later:

same task
   ↓
change status
   ↓
React renders it in a different column

Checkpoint

Before moving on, make sure you can explain why a task needs an id and why status belongs inside the task object.

In the next module, we will replace the starter’s fixed task data with React state and begin making the board respond to changes.