Returning Multiple Children Using React Fragments

With the introduction of React 16, we can now return multiple children elements in a component’s render method using an array of components, elements and/or strings. For example, this is now valid syntax as of React 16:

class App extends Component {
  render() {
    return [
      <Card key="1" />,
      'Just a text node',
      <Card key="2" title="Hello" content="I'm just a card in the world" />
    ];
  }
}

The benefit to being able to return multiple elements is that we don't have to include superfluous div elements that wrap our elements and clutter the DOM.

And this works just a well in stateless functional components (SFCs):

const App = () => {
  return [
    <Card key="1" />,
    'Just a text node',
    <Card key="2" title="Hello" content="I'm just a card in the world" />
  ];
};

The problem is that the syntax using an array is a little bit awkward, and we need to add a unique key to elements. The solution, which was introduced with React 16.2, is to make use of React Fragments.

Enter React Fragments

Using the Fragment component, we can now accomplish the same without the array syntax and without using keys. Just use the React.Fragment component to wrap your returned elements:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Card />
        Just a text node
        <Card title="Hello" content="I'm just a card in the world" />
      </React.Fragment>
    );
  }
}

We can make the syntax more concise by importing the Fragment component directly:

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    return (
      <Fragment>
        <Card />
        Just a text node
        <Card title="Hello" content="I'm just a card in the world" />
      </Fragment>
    );
  }
}

<> </> Shorthand Syntax

You can achieve the paramount of conciseness by using the new <> </> shorthand syntax:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <>
        <Card />
        Just a text node
        <Card title="Hello" content="I'm just a card in the world" />
      </>
    );
  }
}

Babel 7, which is still in beta at the time of this writing, is needed for this shorthand syntax to be properly transpiled to the <React.Fragment> equivalent.

The current stable version of Create React App uses Babel 6.x under the hood, so the shorthand syntax won’t work right out of the box. To start using that syntax now, you can use the latest unstable release of react-scripts, which makes use a Babel 7 beta release:

$ yarn add react-scripts@next

Note also that we can add props to the fragment component when using the <React.Fragment> syntax, but not when using the shorthand syntax. For example, if a top-level fragment is returned when iterating over an array, we can add a key prop, but that's not possible using the shorthand syntax.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#