React Fragments

Fragments group elements without extra DOM nodes.

Long Syntax

import { Fragment } from 'react';

function List() {
  return (
    <Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
    </Fragment>
  );
}

Short Syntax

function List() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
    </>
  );
}

With Keys

function List({ items }) {
  return (
    <>
      {items.map(item => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </>
  );
}

Remember

• No extra DOM nodes
• Use short syntax <> usually
• Long syntax needed for keys

Next: Learn strict mode!