props.children represents whatever content is nested between a component's opening and closing tags, letting components wrap and render arbitrary content passed to them.

Syntax

<Wrapper>
  <p>This becomes props.children</p>
</Wrapper>

Deep Dive Course

Whenever a component is used with content nested between its tags, like <Card>Bio</Card>, React automatically passes that nested content to the component as a special prop called children — the component can then place props.children anywhere inside its own returned JSX to render that nested content wherever it belongs, most commonly to build generic, reusable wrapper components like a Card, Modal, or Layout that don't need to know anything about the specific content they'll eventually wrap. children can be a single element, a string, multiple elements, or even a function, depending on what was actually nested.

1Understanding Children

💡

Use props.children to build genuinely generic wrapper components, like a Card or Modal, that render a consistent container/style but accept completely arbitrary nested content, rather than hardcoding a specific content prop shape into the wrapper itself.

editor.html

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>Some content here.</p>
    </Card>
  );
}

localhost:3000

2Practical Example

Here is a real-world application of Children showing how it is used in production React code.

editor.html

function Modal({ children, isOpen }) {
  if (!isOpen) return null;
  return <div className="modal-overlay"><div className="modal-content">{children}</div></div>;
}

// <Modal isOpen={true}><p>Are you sure?</p></Modal>

localhost:3000

3Best Practices

Follow these guidelines when working with Children:

1. Use props.children for wrapper components, like Card, Modal, or Layout, that need to render whatever arbitrary content is nested inside them

2. Provide a fallback or default value for props.children when a component might be used with nothing nested inside it, avoiding a rendering error or blank output

3. Use React.Children utilities, or simply array methods if children is guaranteed to be an array, when a wrapper component needs to inspect, count, or transform its children rather than just render them as-is

⚠️

Tip: Use props.children to build genuinely generic wrapper components, like a Card or Modal, that render a consistent container/style but accept completely arbitrary nested content, rather than hardcoding a specific content prop shape into the wrapper itself.

editor.html

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>Some content here.</p>
    </Card>
  );
}

localhost:3000

Examples

Example 01Basic Usage

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>Some content here.</p>
    </Card>
  );
}

Example 02Advanced Example

function Modal({ children, isOpen }) {
  if (!isOpen) return null;
  return <div className="modal-overlay"><div className="modal-content">{children}</div></div>;
}

// <Modal isOpen={true}><p>Are you sure?</p></Modal>

Best Practices

Use props.children for wrapper components, like Card, Modal, or Layout, that need to render whatever arbitrary content is nested inside them
Provide a fallback or default value for props.children when a component might be used with nothing nested inside it, avoiding a rendering error or blank output
Use React.Children utilities, or simply array methods if children is guaranteed to be an array, when a wrapper component needs to inspect, count, or transform its children rather than just render them as-is

Interview Question

Why is props.children considered just a regular prop, rather than some special, separate mechanism outside the normal props system?▼

Hint: Think about how JSX actually compiles <Card>Bio</Card> in terms of the underlying function call and its arguments.

When JSX compiles <Card>Bio</Card>, the nested Bio content is passed as part of the exact same props object every other attribute gets bundled into, just under a reserved key specifically named children, roughly equivalent to Card({ children: Bio }) — there's no separate function argument or distinct mechanism involved at all, it's the same single props object a component always receives, with children simply being the conventional name React uses for whatever was nested between the tags. This is exactly why a component can destructure children alongside any other regular prop, function Card({ children, title }), and why passing content between a component's tags versus passing it as an explicit children={...} attribute are actually equivalent, both ultimately populate that very same props.children key.

Exercises

MediumPractice using Children in a real scenario.

View Solution

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>Some content here.</p>
    </Card>
  );
}

Frequently Asked Questions

Why is props.children considered just a regular prop, rather than some special, separate mechanism outside the normal props system?▼

When JSX compiles

Bio

, the nested

Bio

content is passed as part of the exact same props object every other attribute gets bundled into, just under a reserved key specifically named children, roughly equivalent to Card({ children:

Bio

}) — there's no separate function argument or distinct mechanism involved at all, it's the same single props object a component always receives, with children simply being the conventional name React uses for whatever was nested between the tags. This is exactly why a component can destructure children alongside any other regular prop, function Card({ children, title }), and why passing content between a component's tags versus passing it as an explicit children={...} attribute are actually equivalent, both ultimately populate that very same props.children key.

Related Functions

propscomponent-renderingJSX