Connect the Board to React State

The interface is ready, but the application still has no real source of changing data. Right now, App.jsx contains a constant array and every component simply reads from it.

In this module, you will turn that fixed data into React state and make the component tree depend on it.

You will learn how to:

• Store tasks with useState
• Pass state through component props
• Render lists from state
• Derive column contents and counts from the same task array
• Keep responsibilities clear between App, Column, and TaskCard

We will not add task creation or drag and drop yet. First, we need a reliable data flow.

What comes next

You will start by giving App ownership of the task list.

Checkpoint

Be able to describe the direction of data before writing code:

App state
   ↓
Column props
   ↓
TaskCard props
   ↓
visible UI