React › Component Composition & Children Props

What is the children prop in React and how does it work?

Intermediate

Answer

The children prop automatically holds whatever content is placed between the opening and closing tags of a component. It lets a component wrap around any content without needing to know in advance exactly what that content will be.

function Layout({ children }) {
  return (
    <div className="layout">
      <header>My Site</header>
      <main>{children}</main>
      <footer>Copyright 2026</footer>
    </div>
  );
}

<Layout>
  <h1>Home Page</h1>
</Layout>

Real-world example A website reuses the same Layout component on every page, and simply changes what content sits inside the header, main, and footer by passing different children each time.

Common follow-ups: Can a component receive both a children prop and other named props at the same time?;What happens if a component using children is rendered with no content inside it?

Components & JSX;Props & State