The Children Prop

The Children Prop (children)

React provides a special reserved prop named children. It represents whatever JSX content is passed between the opening and closing tags of a component.

What is the Children Prop?

The children prop allows components to act as generic "wrapper containers" (cards, modals, sidebars, layouts) without needing to know their specific child content ahead of time.

// Card wrapper component
function Card({ title, children }) {
  return (
    <div className="card-container">
      <div className="card-header">
        <h2>{title}</h2>
      </div>
      <div className="card-body">
        {children} {/* Renders whatever is placed inside <Card>...</Card> */}
      </div>
    </div>
  );
}

Using Container Components

When invoking container components, place nested JSX directly inside the component tags.

function PageLayout() {
  return (
    <Card title="User Settings">
      <p>Manage your account preferences here.</p>
      <button>Save Changes</button>
    </Card>
  );
}

Combining children with Complex Layouts

You can combine children with named props for complex layouts like sidebars and main content areas.

function SplitScreen({ left, right }) {
  return (
    <div className="split-view">
      <aside className="sidebar">{left}</aside>
      <main className="content">{right}</main>
    </div>
  );
}

// Usage
<SplitScreen 
  left={<NavigationMenu />} 
  right={<DashboardView />} 
/>

Summary & TL;DR

• props.children is a special prop that captures content placed inside a component's opening and closing tags (<Modal>content</Modal>).
• Container components use children to create reusable structural UI shells (Cards, Dialogs, Layouts).
• Children can be strings, elements, or arrays of elements.