How to pass JSX into another component?

ReactJunior~1 min read

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

Short Answer

Interview ready

Premium

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