React · Theory

Fragments in React

Theory

26/94

Fragments in React

A fragment groups children without adding a DOM node. <> <h1/> <p/> </> is the short form. When you map and need a key, use <Fragment key={id}> — the short <> cannot take attributes.

Why bother: wrapping table cells in a div is invalid HTML. Fragment keeps <td> siblings legal. Don’t Fragment everything ‘for purity’ — a div is fine when you actually need a layout box.

Fragments in React — two cells, no extra wrapper in the DOM. Short <> cannot take a key — use Fragment.

Exam tip

<> vs Fragment+key.

Example

// Fragment
import { Fragment } from "react";

export default function Cells({ rows }) {
  return rows.map((r) => (
    <Fragment key={r.id}>
      <td>{r.name}</td>
      <td>{r.marks}</td>
    </Fragment>
  ));
}

Fragments in React — two cells, no extra wrapper in the DOM. Short <> cannot take a key — use Fragment.

Short notes

DefGroup without extra DOM node.
Key : <Fragment key>, not <>.
Usetable cells / multiple roots.

// Fragment import { Fragment } from "react"; export default function Cells({ rows }) { return rows.map((r) => ( <Fragment key={r.id}> <td>{r.name}</td> <td>{r.marks}</td> </Fragment> )); }

Fragments in React

Example

Short notes

Questions

Fragments in React

Example

Short notes

Questions