jsschools

Fragment

Groups multiple children without adding an extra DOM node.

Since React 16.2 Spec ↗

Syntax

<Fragment>...</Fragment> or <>...</>

Returns

element — A wrapper that renders its children with no surrounding element.

Examples

function Row() {
  return (
    <>
      <td>Name</td>
      <td>Email</td>
    </>
  );
}

<Fragment key={item.id}>
  <dt>{item.term}</dt>
  <dd>{item.def}</dd>
</Fragment>

Notes

Use the `<>...</>` shorthand when no props are needed. The explicit `<Fragment>` form is required when you need a `key`, for example when rendering a list of grouped elements. Fragments produce no markup and cannot take refs or other DOM attributes.

See also