How to Pass JSX as a Prop in React

JSX is an expression, so you can treat it like any other value. You can pass JSX as a prop to let a parent hand over ready-made markup for a child to render. This is the basis of flexible wrapper and layout components.

JSX is a value

A JSX tag is not a string. It evaluates to a value that describes UI, the same kind of value a component returns. Because it is a value, it fits inside a prop or a variable:

App.jsx

const badge = <span className="badge">New</span>;

The variable badge now holds JSX, and you can pass it to another component. That is the whole trick behind passing JSX as a prop.

Pass JSX as a named prop

Give the child a prop that expects JSX. This Alert component receives an icon prop and renders it next to the message:

App.jsx

function Alert({ icon, children }) {
  return (
    <div className="alert">
      {icon}
      <p>{children}</p>
    </div>
  );
}

The parent supplies the icon as JSX, passing a span with an exclamation mark so the Alert stays reusable for any message:

App.jsx

function App() {
  return (
    <Alert icon={<span aria-hidden="true">!</span>}>
      Your changes are saved.
    </Alert>
  );
}

The browser shows the alert with the exclamation icon beside the message. The Alert component does not know what the icon looks like. It only knows where to place it.

You can pass any JSX as a named prop: a panel, a button, or a list. The child controls placement, and the parent controls content.

Use children for the main content

For the primary content a component wraps, use the special children prop. Nesting JSX between the component's tags assigns it to children automatically:

App.jsx

function Card({ title, children }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

The title arrives as a regular string prop, and the content nested between the opening and closing Card tags becomes children. The App component supplies both:

App.jsx

function App() {
  return (
    <Card title="Billing">
      <p>Your plan renews on August 20.</p>
      <button>Update card</button>
    </Card>
  );
}

The browser renders a card with the heading and the two nested elements. This pattern keeps layouts readable because the content stays in the parent where it is written. The card itself stays generic, so the same Card can wrap a form, a receipt, or a message later.

The children prop guide goes deeper into composition with real examples.

Named JSX props or children

Use a named JSX prop when the slot is optional or one of several. Use children when there is one main content area.

• Several distinct slots: use named props like icon and footer.
• One main wrapped content: use children.
• One optional slot: a named prop with a default keeps it clear.

Choose the shape that makes the parent code easiest to scan. When in doubt, children is the more idiomatic default. Whichever shape you pick, keep the parent code scannable so a reader sees the content without jumping into the wrapper implementation.

What to learn next

Start from the basics of passing props, then practice building your own wrapper components with one or two JSX slots.