React Fragments

Introduction

If you have written more than a couple of React components, you have probably hit this error: "Adjacent JSX elements must be wrapped in an enclosing tag." React components can only return one single root element from their JSX, and at first the easiest fix seems to be wrapping everything in an extra <div>. But that extra div is not free — it changes your actual HTML output, and sometimes it breaks your CSS layout (especially with Flexbox or Grid) or clutters the DOM with meaningless wrapper elements.

React Fragments solve exactly this problem. They let you group a list of children together and satisfy the single-root-element rule, without rendering any extra node to the DOM at all. This lesson covers the rule itself, why unnecessary wrapper divs are a problem, and the two ways to write a Fragment — including the one case where you cannot use the short syntax.

The Single Root Element Rule

A React component's render logic (its return statement) must resolve to exactly one root React element. This is because JSX compiles down to nested function calls (React.createElement), and a JavaScript function can only return one value. If you try to return two sibling elements side by side, React (via the JSX compiler) has no way to combine them into a single return value.

function UserCard() {
  return (
    <h2>Jane Doe</h2>
    <p>Frontend Engineer</p>
  );
}
// Error: Adjacent JSX elements must be wrapped in an enclosing tag.

To fix this, the two elements need a single parent wrapping them. The most obvious fix is adding a <div>, and that works — but it is not always the best choice.

function UserCard() {
  return (
    <div>
      <h2>Jane Doe</h2>
      <p>Frontend Engineer</p>
    </div>
  );
}

The Problem With Extra Divs

Adding a wrapping <div> is harmless in small examples, but in a real application, components are nested inside other components many levels deep. If every component adds its own wrapper div just to satisfy the single-root rule, the actual rendered HTML ends up full of meaningless, empty <div> elements — sometimes called "div soup."

React.Fragment

React.Fragment is a built-in component that lets you group a list of children without adding an extra node to the DOM. You use it exactly like any other wrapping element, just swapping <div> for <React.Fragment>.

import React from 'react';

function UserCard() {
  return (
    <React.Fragment>
      <h2>Jane Doe</h2>
      <p>Frontend Engineer</p>
    </React.Fragment>
  );
}

<h2>Jane Doe</h2>
<p>Frontend Engineer</p>

<!-- No wrapping element at all — the h2 and p are direct children of whatever rendered UserCard. -->

Notice that the rendered output contains only the <h2> and <p> — React.Fragment itself never appears in the DOM. It exists purely so your JSX has a single root to return.

The Short Syntax <>...</>

Because grouping elements without a wrapper is such a common need, React provides a shorthand: empty angle brackets, <>...</>. This is exactly equivalent to React.Fragment, just shorter to type and read, and it does not require importing anything.

function UserCard() {
  return (
    <>
      <h2>Jane Doe</h2>
      <p>Frontend Engineer</p>
    </>
  );
}

Fragments With Keys

The shorthand <>...</> syntax has one important limitation: it cannot accept any props at all, including the key prop. Normally this does not matter, but there is one situation where it does — rendering a list of Fragments with .map(), where React requires a unique key on each top-level item to track list changes efficiently.

In that case, you must fall back to the explicit React.Fragment (or just Fragment, if imported directly) so you have somewhere to put the key.

import { Fragment } from 'react';

function GlossaryList({ terms }) {
  return (
    <dl>
      {terms.map((term) => (
        <Fragment key={term.id}>
          <dt>{term.word}</dt>
          <dd>{term.definition}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

<dl>
  <dt>Props</dt>
  <dd>Data passed from a parent component to a child.</dd>
  <dt>State</dt>
  <dd>Data a component manages internally and can update over time.</dd>
</dl>

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Fragments are a small feature with an outsized impact on how clean your rendered HTML stays. Instead of reaching for an extra <div> every time a component needs to return multiple elements, you now know to reach for <>...</> — and to fall back to the explicit <Fragment key={...}> form the moment a key is required, such as inside a mapped list.

With the single-root rule handled cleanly, you are ready to move into one of the most important topics in all of React: Hooks. The next lesson introduces what Hooks are, why they were added to React, and the rules you must follow when using them.