Suggest an edit

Improve this article

Refine the answer for “What is children?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts497 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.