React · Exercise 1 of 6Next
Intermediate
Milestone 1: a static board from data
Build the static task board from COLUMNS and SEED_TASKS with props only (no state). Follow the TODOs.
Each column is a <section> with id="col-todo", id="col-doing" or id="col-done", labelled with aria-labelledby by an <h2> that shows the title and count, like To do (2).
Each task is an <li className="task"> containing <span className="title"> with the task title and a <span className="badge ..."> with its priority.
What Check tests
- There are three columns:
#col-todo,#col-doingand#col-done - Each column is labelled by its heading
- The headings show the counts:
To do (2),Doing (1),Done (1) - Every task is a
li.taskin the right column - Each card shows its priority in a
.badge - The board is drawn from data with
map, without key warnings
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.