Suggest an edit

Improve this article

Refine the answer for “How to pass JSX into another component?”. 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)

## 1. Short answer

In React, **JSX can be passed into a component as "nested content"**,
and inside the receiving component it is available through `props.children`.

---

## 2. Example: basic JSX passing

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

function App() {
  return (
    <Card>
      <h2>Card title</h2>
      <p>Card description</p>
    </Card>
  );
}
```

Here:

- `<Card> ... </Card>` is the parent component;
- Everything inside (`<h2>` and `<p>`) React passes into `props.children`;
- The `Card` component renders `{props.children}` inside itself.

Result:

```javascript
<div class="card">
  <h2>Card title</h2>
  <p>Card description</p>
</div>
```

---

## 3. Destructuring for brevity

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

---

## 4. Example with several nested JSX elements

```javascript
<Card>
  <img src="photo.jpg" alt="Photo" />
  <h3>Product</h3>
  <p>Price: $100</p>
  <button>Buy</button>
</Card>
```

All of this will be passed into `props.children` as **an array of JSX elements**:

```javascript
props.children = [
  <img ... />,
  <h3>Product</h3>,
  <p>Price: $100</p>,
  <button>Buy</button>
];
```

---

## 5. Passing JSX as a regular `prop`

Sometimes JSX can be passed not as `children` but as a **named prop**.

```javascript
function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

function App() {
  return (
    <Layout
      header={<h1>Site title</h1>}
      footer={<p>© 2025</p>}
    >
      <p>Main page content</p>
    </Layout>
  );
}
```

This way you can pass **different JSX blocks** into defined "slots".

---

## 6. Passing JSX through variables

JSX is a regular expression, so it can be stored in a variable and passed as a `prop` value:

```javascript
const content = <p>This is the card content</p>;

<Card>{content}</Card>
```

Or:

```javascript
<Card content={<p>Content</p>} />
```

and inside the component:

```javascript
function Card({ content }) {
  return <div>{content}</div>;
}
```

---

## 7. Example - a container component

```javascript
function Modal({ title, children }) {
  return (
    <div className="modal">
      <h2>{title}</h2>
      <div className="modal-content">{children}</div>
    </div>
  );
}

<Modal title="Sign in">
  <form>
    <input placeholder="Email" />
    <input type="password" placeholder="Password" />
    <button>Log in</button>
  </form>
</Modal>
```

Here `<form>...</form>` is the JSX passed as `children`.

---

## 8. What can be passed as JSX

You can pass:

- text:

```javascript
  <Card>Hello!</Card>
  ```
- JSX elements:

```javascript
  <Card><p>Description</p></Card>
  ```
- an array of elements:

```javascript
  <Card>{[<li>1</li>, <li>2</li>]}</Card>
  ```
- even **other components**:

```javascript
  <Card><Button>Buy</Button></Card>
  ```

---

## 9. The React.Children API (for advanced cases)

If you need to process `children` inside a component, React provides special methods:

```javascript
function Wrapper({ children }) {
  return (
    <div>
      {React.Children.map(children, (child, i) => (
        <div key={i} className="child">{child}</div>
      ))}
    </div>
  );
}
```

`React.Children.map` helps safely iterate over all passed JSX elements, even if they are not an array.

---

## 10. Summary

| Way | Example | When to use |
|---|---|---|
| `props.children` | `<Card>...</Card>` | Containers, layout components |
| JSX as a prop | `<Layout header={<Header />} />` | Several "slots" |
| JSX in a variable | `const c = <p>...</p>` | Dynamic passing |
| `React.Children.map` | Processing `children` | For a complex structure |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.