React Props Children

What is Props Children in React?

props.children holds whatever JSX a component was wrapped around. It turns a component into a container you can drop arbitrary content into, which is the basis of layout, card, modal and wrapper components.

Why Props Children matters

Without children you would need a prop for every possible slot. With it, one Card component wraps any content while keeping its own border, padding and shadow.

Props Children example

function Card({ title, children }) {
  return (
    <section className="card">
      <h3>{title}</h3>
      <div className="card-body">{children}</div>
    </section>
  );
}

<Card title="Eligibility">
  <p>Open to final-year students.</p>
  <ul><li>B.Tech / BCA / MCA</li></ul>
</Card>

How this works

Everything between the opening and closing Card tags becomes props.children and is rendered wherever the component places it. The wrapper controls the shell; the caller controls the contents.

Multiple slots via props

function Layout({ sidebar, children }) {
  return (
    <div className="grid">
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

<Layout sidebar={<Filters />}>
  <Results />
</Layout>

JSX is just a value, so you can pass elements through ordinary props to create as many named slots as you need.

Key points to remember

• children can be a single element, an array of elements, text, or undefined.
• Named slots are simply props that hold JSX.
• React.Children helpers exist for inspecting children, but explicit props are usually clearer.

Common mistakes with Props Children

• Assuming children is always an array — with one child it is that child, not an array.
• Rendering children more than once and forgetting they may contain stateful components.