Home Challenges Reps Problems Leaderboard Take a challenge

A List and Its Row

Every table you will ever build. One component owns the list, another owns a row, and the empty case is a real state rather than an afterthought.

Intermediate20 min on the clock5 graded checks · 100 pointsComponents That Fit TogetherPro

Graded by running your code against real cases.

What you build

Row({ user }) — one table row
UserList({ users, emptyLabel }) — a table built out of Rows
An empty list renders the empty label, not an empty table
The caption says how many there are
Give each row a key

Done means

The table is made of Row components, and an empty list says so in a sentence.

How it is graded

Published in full, before you start — every point is one of these and there is nothing else. Each one runs your code; it is not a search for keywords.

One row per user, with name and email+25Lists and their rows
The table is built from Row+20Slots and children
An empty list renders the empty state+20Lists and their rows
The caption counts them+20Lists and their rows
Each row has a key (read from your source)+15Lists and their rows

What it teaches

Lists and their rowsbeginner

A list component owns the collection and a row component owns one item, and the empty case is a state to render rather than a blank space where a table should be.

Slots and childrenintermediate

A component that does not know what goes inside it is one you reuse; a component that hardcodes its contents is one you copy — and children is the prop that makes the difference.

The rest of Components That Fit Together

Data Flows DownBeginner · 15 min Slots and ChildrenBeginner · 15 min Lift the State UpIntermediate · 20 min Container and ViewAdvanced · 25 min