Hiprup

What is the children prop in React?

The children prop is a special prop that holds anything passed between the opening and closing tags of a component. It lets a component wrap arbitrary content without knowing what it is in advance.

  • Composition pattern — the foundation of reusable wrappers like Card, Modal, Layout.

  • Type — can be a single element, an array of elements, a string, a number, or even a function.

  • Render props pattern — pass a function as children so the parent can call it with arguments.

  • React.Children helpers — React.Children.map, React.Children.toArray safely iterate over children of any shape.

  • Avoids prop drilling — expressing layout via children is often cleaner than passing nested data through many props.

// Basic children usage - wrapper component
function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Usage
<Card title="Profile">
  <img src="/avatar.png" alt="Avatar" />
  <p>John Doe - Developer</p>
</Card>

// Multiple slot pattern
function Layout({ header, sidebar, children }) {
  return (
    <div className="layout">
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

<Layout
  header={<Nav />}
  sidebar={<Menu />}
>
  <h1>Main Content</h1>
</Layout>

Card uses children to accept arbitrary content between its tags. The content (img and p) is rendered inside the card-body div.

Layout demonstrates the slot pattern: header and sidebar are passed as named props, while the main content comes through children. This enables flexible, reusable layout components.

Show the composition pattern — how children enables building reusable wrapper components. Mention the slot pattern (named props + children) for complex layouts.

This demonstrates component design thinking.

What is the children prop in React? | Hiprup