HomeChallengesRepsProblemsLeaderboardTake a challenge

Slots and Children

A Panel that does not know what goes inside it. This is the difference between a component you reuse and a component you copy.

Beginner15 min on the clock5 graded checks · 100 pointsComponents That Fit TogetherPro
Graded by running your code against real cases.

What you build

  • Panel({ title, children, actions, footer }) — one main slot and two optional ones
  • An optional slot that was not passed renders nothing at all
  • Split({ left, right }) — two named slots, passed as elements
  • Toolbar({ children }) — reports how many children it was given
  • A default export that nests all three

Done means

Panel renders anything you nest in it, and omits the slots you left out.

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.

  1. Panel renders whatever is nested in it+25Slots and children
  2. An omitted slot renders nothing+25Slots and children
  3. Split puts each element in its own side+25Slots and children
  4. Toolbar counts its children+15Slots and children
  5. The default export nests them+10Slots and children

What it teaches

The rest of Components That Fit Together