Home Challenges Reps Problems Leaderboard Take a challenge

Lift the State Up

A search box, a count and a list of results. Three components that must always agree — which means exactly one of them can own the state, and it is none of these three.

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

Graded by running your code against real cases.

What you build

SearchInput({ value, onChange }) — controlled, owns nothing
ResultCount({ shown, total }) — reads "2 of 5"
Results({ items }) — the filtered list
A page component that holds the query and passes it down
The filtered list is derived on render, never stored

Done means

One piece of state, held above all three, and the count always matches the list.

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.

SearchInput renders the value it was handed+25Lifting state up
ResultCount reads shown of total+20Data flows down
Results renders one item per entry+15Lists and their rows
The page passes its state to all three+25Lifting state up
Exactly one useState in the file (read from your source)+15Lifting state up

What it teaches

Lifting state upintermediate

When two components must always agree, neither of them can own the value — it moves to the lowest component containing both, and comes back down as props.

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.

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.

The rest of Components That Fit Together

Data Flows DownBeginner · 15 min Slots and ChildrenBeginner · 15 min A List and Its RowIntermediate · 20 min Container and ViewAdvanced · 25 min