easyFrontend

What are fragments in React?

Q: What are fragments in React?

**Core concept (TL;DR).** A Fragment lets a component return **multiple children without adding an extra DOM node**. Because a component must return a single root, fragments — written as <>…</> or <React.Fragment> — group siblings without the "wrapper <div> soup" that breaks layouts like fl/grid and tables. Group siblings, emit no wrapper element &

485 views

Understand the problem

A simple yet useful feature for cleaner component structure.

fragmentsdomjsxrendering

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Return siblings without a wrapper

import { Fragment } from "react";

function Columns() {
  return (
    <>                          {/* shorthand fragment — no extra <div> */}
      <td>Name</td>
      <td>Role</td>
    </>
  );
}

export default function App() {
  const rows = [{ id: 1, a: "Ada", b: "Eng" }];
  return (
    <table style={{ fontFamily: "system-ui", margin: 24 }}>
      <tbody>
        <tr><Columns /></tr>
        {rows.map((r) => (
          <Fragment key={r.id}>   {/* keyed fragment in a list */}
            <tr><td>{r.a}</td><td>{r.b}</td></tr>
          </Fragment>
        ))}
      </tbody>
    </table>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the difference between element and component in React?

What is the Virtual DOM in React?