Fragments & Returning Multiple Elements

Reviewed & published by Brayan K

A fragment is a wrapper that lets a component return several sibling elements as one without adding an extra DOM node. You write it as the shorthand <>...</> or the full <React.Fragment>, which keeps your HTML flat and avoids unnecessary wrapper-div clutter.

Part of the free React course at LearnCodingFast — hands-on lessons with worked examples and the output they print, plus practice exercises and a quick quiz.

What You'll Learn

• Why a component must return one root element
• Group siblings with the <>...</> shorthand
• When to use the full <React.Fragment> form
• Add a key to a fragment inside a list
• Avoid wrapper-div soup that breaks layouts
• Choose between a fragment and a real div

1️⃣ Why One Root — and the Fragment Fix

A component's return is a single expression, so it must produce one element. Returning two siblings is invalid. A fragment groups them into one returned element while rendering nothing extra to the DOM.

// ❌ Two siblings — "Adjacent JSX elements must be wrapped"
function Bad() {
  return (
    <h1>Title</h1>
    <p>Body</p>
  );
}

// ✅ One fragment groups them, no extra <div>
function Good() {
  return (
    <>
      <h1>Title</h1>
      <p>Body</p>
    </>
  );
}

// A return is ONE expression -> ONE element.
// Returning two siblings is like returning two values:
function twoValues() {
  // return 1, 2;  // ❌ only the last is kept
  return [1, 2];    // ✅ group them into ONE thing
}

console.log(twoValues());          // [1, 2]
console.log(twoValues().length);   // 2
// A fragment groups JSX siblings the same way — into one returned element.

2️⃣ Shorthand vs React.Fragment & Wrapper Soup

The shorthand <>...</> is the everyday choice, but it cannot take props. When you map a list and each item needs two elements under one key, use the full form <React.Fragment key={id}>. Reaching for a real div every time instead leads to wrapper-div soup — stacks of meaningless nodes that bloat the DOM and break flex/grid layouts.

function Glossary({ items }) {
  return (
    <dl>
      {items.map(item => (
        <React.Fragment key={item.id}>    
          <dt>{item.term}</dt>
          <dd>{item.def}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

// "Wrapper div soup": extra <div>s pile up and can break layout.
// Count how many wrappers a nested structure adds.
function wrappers(depth) {
  let html = "content";
  for (let i = 0; i < depth; i++) {
    html = "<div>" + html + "</div>";   // each level = one extra node
  }
  return html;
}

console.log(wrappers(0));   // content        (fragment: 0 extra nodes)
console.log(wrappers(2));   // <div><div>content</div></div>

Your turn — produce a keyed label list:

// 🎯 YOUR TURN — fill in each ___ then press "Try it Yourself".
// A keyed fragment in a list groups two elements per item under ONE key.
// 1) Map each item to a label that includes its key (the id).
// 2) Join the labels with ", ".

const items = [
  { id: "a", term: "JSX", def: "syntax" },
  { id: "b", term: "Props", def: "inputs" },
];

const labels = items.map(item => item.___ + ":" + item.term);  // 👉 id
console.log(labels.___(", "));                                  // 👉 join

// ✅ Expected output:
//    a:JSX, b:Props

3️⃣ Fragment or Div? Make the Call

Ask one question: does the wrapper need to do anything — carry a class, a style, an event handler, or act as a layout box? If yes, use a div. If the wrapper exists only to satisfy the one-root rule, use a fragment so the DOM stays clean and parent layouts (like a flex row) treat your children as direct siblings.

// Needs styling/layout  -> real element
function Box({ children }) { return <div className="box">{children}</div>; }

// Purely structural      -> fragment (children become direct siblings)
function Columns() {
  return (
    <>
      <Cell />
      <Cell />
    </>
  );
}

🧩 Reorder Challenge

These lines return two siblings using the fragment shorthand. Put them in the right order:

A.   <h1>Welcome</h1>
B.   return (
C.   </>
D.   <>
E.   <p>Glad you are here</p>

Common Errors (and the fix)

• "Adjacent JSX elements must be wrapped." — Two siblings with no parent. Wrap in <>...</>.
• Putting a key on the shorthand. — <key=...> is invalid. Use <React.Fragment key={id}>.
• Broken flex/grid layout. — An accidental wrapper div made children non-direct. Swap it for a fragment.
• Missing key warning in a list. — Each mapped fragment still needs a stable key.

📋 Quick Reference

🧠 Quick Recall

1. Does a fragment add a DOM node?

No. It renders its children directly with zero extra elements.

2. When must you use <React.Fragment> over <></>?

When you need to pass a prop such as key; the shorthand cannot take props.

3. Fragment or div for a styled card?

A div — you need a real element to attach the class and box styling.

Mini-Challenge: Flatten Without Wrappers

Each pair should contribute two flat entries — just like a keyed fragment emits two siblings per item. Run it and check your output.

// 🎯 MINI-CHALLENGE: flatten without extra wrappers
//
// A fragment lets each item contribute MULTIPLE elements to one flat list.
// 1. For each pair, produce TWO entries: the term, then the definition.
// 2. flatMap them into a single flat array.
// 3. console.log the flat list joined by " | ".
//
// ✅ Expected output:
//    JSX | a syntax | Props | inputs

const pairs = [
  { term: "JSX", def: "a syntax" },
  { term: "Props", def: "inputs" },
];

// your code here

🎉 Lesson Complete

• ✅ A return must be one element — fragments make it so
• ✅ Use <>...</> for the common case, <React.Fragment> when you need a key
• ✅ Fragments add zero DOM nodes
• ✅ Reach for a div only when the wrapper must do something

Practice quiz

Continue this course

• Previous: Props & One-Way Data Flow
• Next: Handling Events — Respond to clicks, key presses, and other user interactions in React
• Quick reference: React cheat sheet

Frequently asked questions

Why must a component return one element?

Because the return is a single JavaScript expression that compiles to one element object. Two siblings would be two values. A fragment groups them into one without adding a DOM node.

What is the difference between <></> and <React.Fragment>?

They mean the same thing, but the shorthand <></> cannot take props. When you need a key (for example inside a list), use the long form <React.Fragment key={...}>.

Does a fragment add an element to the page?

No. Fragments render their children directly with no extra wrapper, which keeps your HTML flat and avoids breaking CSS layouts like flexbox or grid.

When should I still use a real div?

Whenever you actually need a styled box, a class, an event handler, or a layout container. Use a fragment only when the wrapper would be purely structural and unwanted.