Home Challenges Reps Problems Leaderboard Take a challenge

Container and View

Split a dashboard into the part that decides and the part that draws. The drawing half should be renderable with numbers you made up — that is the test of whether you got it right.

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

Graded by running your code against real cases.

What you build

StatCard({ label, value }) and EmptyState({ title })
summarise(orders) — the numbers the view needs, as plain data
DashboardView({ stats, rows }) — presentational, no state, no idea where the data came from
No rows means EmptyState, not an empty list
A container default export that derives and hands over

Done means

DashboardView renders correctly from props alone, and holds no state.

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.

StatCard and EmptyState render their props+15Data flows down
summarise turns orders into the numbers+25Container and view
The view renders from made-up props alone+25Container and view
No rows renders the empty state+20Container and view
The view holds no state (read from your source)+15Container and view

What it teaches

Data flows downbeginner

A component receives everything it needs as props and renders it — which is what lets the same card show a laptop on one page and a desk on another without being rewritten.

Container and viewadvanced

Splitting the part that decides from the part that draws is what makes a screen testable with numbers you invented, and the test of whether you did it is exactly that.

The rest of Components That Fit Together

Data Flows DownBeginner · 15 min Slots and ChildrenBeginner · 15 min A List and Its RowIntermediate · 20 min Lift the State UpIntermediate · 20 min