Children and composition

The children prop is whatever a parent puts between a component's tags. It lets you build layouts and wrappers that do not know what goes inside, which is how component libraries stay flexible.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what the children prop holds
Write a wrapper component that renders whatever is put inside it
Replace a pile of content props with children or slot props

In practice

A few lines that show Children and composition doing its job.

TSX

function Card({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="card">
      <h3>{title}</h3>
      <div className="card-body">{children}</div>
    </section>
  );
}

<Card title="Billing">
  <PlanSummary />
  <button>Manage</button>
</Card>

The common mistake

Watch for

Adding a prop for every variation of a component's content, such as footerText, iconName and buttonLabel. Accept children or a few slot props instead, and let callers compose.

What to know first

Your roadmap puts these before Children and composition, unless you already know them.

Passing props

How it stays learned

Once a session shows you understand Children and composition, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on Children and composition.

Layouts

Previous in the module← Passing props

Next in the moduleConditional rendering →