Create the Task State

React state gives a component a value that can change over time. The task list is exactly that kind of value.

1. Import useState

At the top of src/App.jsx, add the hook import:

import { useState } from "react";

You will use the hook inside App.

2. Move the starter data into state

The starter currently has starterTasks outside the component. Keep that array as the initial value, then create state inside App:

const [tasks, setTasks] = useState(starterTasks);

There are two values here:

• tasks is the current task list.
• setTasks is the function that replaces it with a new list.

For now, the list will look exactly the same in the browser. That is a useful checkpoint: we changed where the data lives without changing what the user sees.

3. Pass the state to the columns

Replace the starterTasks prop with tasks:

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

Do the same for the other two columns.

Why App owns the state

A task can appear in any column and later needs to be created, deleted, or moved. Keeping the complete list in the parent gives the application one source of truth.

Checkpoint

Refresh the browser. The board should still show the same sample tasks. Now, however, the columns are reading from React state rather than directly from the starter constant.