Home Challenges Reps Problems Leaderboard Take a challenge

Data Flows Down

One product card, assembled from three components. Nothing has state; everything is props. This is the whole idea, and every stage after it is a variation.

Beginner15 min on the clock5 graded checks · 100 pointsComponents That Fit Together

Graded by running your code against real cases.

What you build

Price({ amount, currency }) — currency defaults, and the caller can override it
Badge({ label, tone }) — tone defaults to "neutral"
ProductCard({ name, price, badge }) — built from Price and Badge, not inline markup
No badge prop means no badge in the output at all
A default export that puts two cards on the page

Done means

Every value on the card arrived as a prop, and the card is made of the other two components.

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.

Price renders the amount, with an overridable currency+20Data flows down
Badge has a default tone the caller can override+20Data flows down
ProductCard renders what it was given+25Data flows down
The card is built from the other two components+20Slots and children
No badge prop renders no badge+15Data flows down

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.

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

Slots and ChildrenBeginner · 15 min A List and Its RowIntermediate · 20 min Lift the State UpIntermediate · 20 min Container and ViewAdvanced · 25 min