React Deep Dive: From Beginner to Advanced/

...

/

Fragments

Fragments

Learn how you can group a list of children and return multiple elements without adding extra nodes to the DOM.

We'll cover the following...

Returning multiple children without a surrounding element

Fragments are some sort of a special component and allow us to create valid JSX without leaving visible traces in the rendered markup. They are a solution to the problem of only ever returning a single element at the top in JSX. This is valid JSX:

render() {
  return (
    <ul>
      <li>Bullet Point 1</li>
      <li>Bullet Point 2</li>
      <li>Bullet Point 3</li>
    </ul>
  );
}

But this isn’t:

render() {
  return (
    <li>Bullet Point 1</li>
    <li>Bullet Point 2</li>
    <li>Bullet Point 3</li>
  );
}

In this example, multiple elements are being returned in the render() method ...