What is children?

ReactJunior~1 min read

Short answer

children is a special property of the props object, into which React automatically places all the content passed inside a component between its opening and closing tag.

In other words:

props.children is the component's "nested elements".

Example #1 - basic

javascript

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

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>Card text</p>
    </Card>
  );
}

What happens:

In App we passed two elements into <Card> - h2 and p;
React automatically places them in props.children;
The Card component renders them inside a div.

In other words:

javascript

props.children = [
  <h2>Title</h2>,
  <p>Card text</p>
];

Example #2 - destructuring

You don't have to write props.children - you can pull it out directly:

javascript

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

Example #3 - wrapper component

children is a perfect fit for building universal "containers".

javascript

function Layout({ children }) {
  return (
    <div className="layout">
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  );
}

function App() {
  return (
    <Layout>
      <h1>Home page</h1>
      <p>Content inside Layout</p>
    </Layout>
  );
}

Everything between <Layout> and </Layout> is passed as children and rendered inside <main>.

Example #4 - passing other components

javascript

function Button({ children }) {
  return <button className="btn">{children}</button>;
}

<Button>Click me</Button>
<Button><strong>Save</strong></Button>

children can be:

text;
a JSX element;
another component;
an array of elements;
null (if nothing was passed).

Example #5 - conditional rendering of `children`

You can render children only under a certain condition:

javascript

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

<Modal isOpen={true}>
  <p>Modal is open</p>
</Modal>

Example #6 - a function as `children` (advanced pattern)

Sometimes children can be a function - this is called "render props".

javascript

function List({ children }) {
  const items = ["apple", "banana", "pear"];
  return <ul>{items.map(children)}</ul>;
}

<List>
  {(item) => <li key={item}>{item.toUpperCase()}</li>}
</List>

Here children is a function, and React calls it for each item of the array.

Example #7 - when `children` is missing

If nothing is passed:

javascript

<Card />

→ props.children === undefined.

This can be handled:

javascript

function Card({ children }) {
  return <div>{children || "No content"}</div>;
}

Summary

What it is	Explanation
`props.children`	Everything passed inside a component
Value type	Text, element, component, array, function
By default	`undefined`, if nothing was passed
Used for	Building wrappers, containers, Layout components
Can be destructured	`function Comp({ children }) { ... }`

Visually

javascript

<App>
 ┗ <Card>
     ┣ <h2>Title</h2>
     ┗ <p>Description</p>
   </Card>

→ Inside Card:

javascript

props.children = [<h2>Title</h2>, <p>Description</p>];

Key idea:

children is a way to "nest" JSX inside components so they can render any arbitrary content. This makes components flexible, universal, and reusable.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.