The children Prop

Composition with children

When you write <Card>Hello</Card>, the string "Hello" (or any nested JSX) becomes props.children inside Card. Layout components like Modal, Page, and Sidebar rely heavily on this pattern.

Unlike explicit props, children creates an open slot — callers decide what goes inside without the wrapper knowing every possible use case.

function Panel({ title, children }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      <div className="panel-body">{children}</div>
    </section>
  );
}

<Panel title="Settings | PHPKINGDOM">
  <SettingsForm />
</Panel>

SettingsForm is passed as children and rendered inside the panel body.

children Variations

// Text children
<Button>Save</Button>

// Element children
<Layout><Header /><Main /></Layout>

// Function as child (render prop pattern)
<DataFetcher url="/api/user">
  {(user) => <Profile user={user} />}
</DataFetcher>

• children can be a string, element, array, fragment, or even a function.
• Multiple children become an array — always key list children.
• Named slots can be modeled with multiple props instead of only children.
• TypeScript: type children as React.ReactNode.

Composition Patterns

Ways to compose components beyond basic children.

Multiple Slots with Named Props

When a component needs several distinct areas (header, footer, sidebar), explicit props often read better than splitting children manually.

function Page({ header, sidebar, children }) {
  return (
    <div className="page">
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

React.Children Utilities

React.Children.map, count, and toArray help manipulate opaque children props. Use sparingly — explicit props or composition are usually clearer. Needed for some library and design-system APIs.

Common Mistakes

• Assuming children is always a single element — it may be an array.
• Overusing render props when simple children suffice.
• Not typing children in TypeScript components.
• Mutating or cloning children unnecessarily.

Key Takeaways

• children is the JSX nested inside a component tag.
• It enables flexible composition for layouts and wrappers.
• Use named props for multiple distinct content areas.
• Type children as ReactNode in TypeScript.