Fragments

`<>...</>` lets you return multiple elements from a component without a wrapping `<div>`.

3 min read Level 1/5 #react#fragments#jsx

What you'll learn

Use the shorthand Fragment `<>...</>`
Know when you need the long form `<Fragment key=...>`

A component must return one root JSX element. But often you don’t want a wrapping <div> cluttering the DOM. Fragments group elements without rendering any wrapper at all.

The Shorthand

function Header() {
  return (
    <>
      <h1>Title</h1>
      <p>Subtitle</p>
    </>
  );
}

The browser sees <h1> and <p> as siblings. No wrapper element is created.

Why Not Just a `<div>`?

A wrapper div can:

Break CSS layout (flex/grid children, table rows)
Add an unwanted extra element to the inspector
Mess up semantics — e.g., inside <dl> you need <dt>/<dd> pairs directly, no wrapper allowed

Fragments solve all of that.

When You Need the Long Form

Inside a .map() you need a key prop. The shorthand <> can’t take props. Use the long form:

import { Fragment } from "react";

function Definitions({ entries }) {
  return (
    <dl>
      {entries.map(e => (
        <Fragment key={e.term}>
          <dt>{e.term}</dt>
          <dd>{e.def}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

Recap

Form	When to use
`<>...</>`	The common case
`<Fragment>...</Fragment>`	When you need to import or pass props
`<Fragment key={id}>...</Fragment>`	Inside a `.map()` that returns Fragments

Up Next

You’ve seen pieces — time to write a real component end to end.

Your First Component →