React Fragments

Why Use Fragments?

By default, React requires that a component returns a single top-level element. If a component tries to return multiple sibling elements, React throws an error.

Example of an Invalid Return

// This WILL NOT work
function MyComponent() {
  return (
    <h1>Abraham Lincoln</h1>
    <p>Abraham Lincoln was the 16th President of the United States.</p>
  );
}
    

The JSX above contains two top-level elements (<h1> and <p>), which will result in a compilation error.

Solutions

To return multiple top-level elements, you have two options:

Option 1: Wrap Elements in a <div>

One common solution is to wrap all elements inside a single container element, such as a <div>.

// This WILL work
function MyComponent() {
  return (
    <div>
      <h1>Abraham Lincoln</h1>
      <p>Abraham Lincoln was the 16th President of the United States.</p>
    </div>
  );
}
    

While this works, it introduces an unnecessary <div> into the real DOM, which might not always be desirable.

Using React Fragments

Instead of adding extra HTML elements, React provides a special component called React.Fragment that allows returning multiple elements without modifying the HTML structure.

Using React.Fragment

import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Abraham Lincoln</h1>
      <p>Abraham Lincoln was the 16th President of the United States.</p>
    </React.Fragment>
  );
}
    

The React.Fragment tag allows multiple top-level elements to be grouped together without adding extra elements to the DOM.

Using Fragment Shorthand

React provides a shorthand syntax for Fragments: empty angle brackets <> ... </>. This is functionally identical to React.Fragment but does not require an explicit import.

Example

function MyComponent() {
  return (
    <>
      <h1>Abraham Lincoln</h1>
      <p>Abraham Lincoln was the 16th President of the United States.</p>
    </>
  );
}
    

The shorthand version is preferred in most cases since it is more concise and does not require an additional import statement.

When to Use React.Fragment

There is only one case where you must use React.Fragment instead of the shorthand syntax: when you need to pass a key prop.

Example with a key Prop

function ItemList({ items }) {
  return (
    <React.Fragment>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </React.Fragment>
      ))}
    </React.Fragment>
  );
}
    

Since the shorthand syntax does not support props, you must use React.Fragment when passing a key.

Comparing <div> vs. Fragment

Let’s compare using a <div> versus using a Fragment.

Using a <div>

<div>
  <h1>Title</h1>
  <p>Some text here.</p>
</div>
    

Here, an extra <div> is added to the DOM, which might interfere with styling or layout.

Using a Fragment

<h1>Title</h1>
<p>Some text here.</p>
    

Using a Fragment avoids unnecessary wrapper elements in the final HTML output.

Wrapping Up

In this tutorial, you learned:

• React requires a single top-level element when returning JSX.
• You can use a <div> to wrap multiple elements, but it adds unnecessary markup.
• React Fragments (React.Fragment or <> ... </>) allow returning multiple elements without adding extra DOM nodes.
• You must use React.Fragment when passing a key prop.

Using Fragments is a best practice for keeping your markup clean and avoiding unnecessary <div> elements. As you continue building React applications, you will find them essential for structuring components efficiently.