Fragments

React · Reference cheat sheet

📋 Overview

Fragments group children without adding an extra DOM node. Use <>...</> or <Fragment> when a component must return multiple siblings. Keyed fragments need the long form.

🔧 Core concepts

• Short syntax — <>...</> (no props, no key).
• Long form — <Fragment key=\{...\}>.
• No DOM — doesn’t affect layout/CSS selectors as a wrapper.
• Return — components return one parent; fragment counts as one.

💡 Examples

import { Fragment } from "react";

export function DefinitionList({
  items,
}: {
  items: { id: string; term: string; description: string }[];
}) {
  return (
    <dl>
      {items.map((item) => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

function Columns() {
  return (
    <>
      <td>A</td>
      <td>B</td>
    </>
  );
}

⚠️ Pitfalls

• Trying to pass key to <>...</>—use Fragment.
• Wrapping with <div> unnecessarily and breaking tables/flex.
• Assuming fragments create a styling target—they don’t.
• Returning arrays without keys when mapping.

🔗 Related

• keys_lists.md — keyed lists
• jsx.md — JSX shape
• children.md — child composition
• component.md — return types
• conditional_rendering.md — multiple branches