Lesson 3 of 5 · 15–25 minutes

Composition and children

🏠The everyday picture

A photo frame doesn't care what photo goes in it. It provides the border; you provide the picture.

📘What it really is

Composition means building bigger components by combining smaller ones.
The special children prop is whatever you put between a component's opening and closing tags:

interface PanelProps {
  title: string;
  children: React.ReactNode;
}

export function Panel({ title, children }: PanelProps) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

<Panel title="Open enquiries">
  <EnquiryCard enquiry={first} />
  <EnquiryCard enquiry={second} />
</Panel>

React.ReactNode is the type for anything React can show: text, elements, lists, nothing.
Layout components (a page frame with header and footer, a card, a modal) usually use children.
Composition avoids prop drilling through many levels in simple cases: put the content in directly instead of passing data down to be rendered deep inside.

🖱️Try it

Create a Layout component with the header, a <main> holding children, and the footer. Create a Panel component as above. Rebuild Dashboard as a Layout containing two panels: "Open enquiries" and "Recently closed".

✅Quick check

What is children in a component?

Show the answer

Whatever is placed between the component's opening and closing tags.

Why make Layout take children rather than a prop for each page?

Show the answer

Any page can be placed inside it, so it works for every page without changes.