Fragments

Fragments — A common pattern in React is for a component to return multiple elements.

Let you group a list of children without adding extra nodes to the DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

A use case for keyed fragments is mapping a collection to an array of fragments.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

Fragments declared with the explicit <React.Fragment> syntax may have keys.

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags.

You can use <></> the same way you’d use any other element except that it doesn’t support keys or attributes.

Keyed Fragments

Short Syntax

Related concepts

Fragments — Structure map

Fragments — Related pages:

Fragments

Strict Mode

Accessibility

Higher-Order Components