Skip to content

Software Engineer at Heydoc

Return multiple elements from a component with React 16

React 16 is here and it brings lots of exciting changes. One of the most requesting features around React community has been returning multiple elements from a component’s render method. Skipping wrapper tag is definitely something that developers are happy about — popularity of my tweet proves this point.

The basic way is to return an array of elements. To avoid warnings you have to add a key to each element, although it may not be needed in the future.

const App = () => [
  <p key="1">React 16 can return multiple elements ❤️</p>,
  <p key="2">React 16 can return multiple elements ❤️</p>,
  <p key="3">React 16 can return multiple elements ❤️</p>,
];

See the Pen 2017-10-02-1 by Pawel Grzybek (@pawelgrzybek) on CodePen.

To avoid array notation and manually added keys to each of the element, you can use an Aux helper function that simply returns all its children. Like so…

const Aux = props => props.children;

const App = () =>
  <Aux>
    <p>React 16 can return multiple elements ❤️</p>
    <p>React 16 can return multiple elements ❤️</p>
    <p>React 16 can return multiple elements ❤️</p>
  </Aux>;

See the Pen 2017-10-02-2 by Pawel Grzybek (@pawelgrzybek) on CodePen.

UPDATE!

React v16.2 introduced another way of returning multiple elements. React.Fragment abstracted in JSX way via just an empty tag. Bare in mind that JSX syntax doesn’t support attributes — use a verbose way if you need so. No extra components needed, no array notation, no keys. Nice!

const App = () => (
  <>
    <p>React 16 can return multiple elements ❤️</p>
    <p>React 16 can return multiple elements ❤️</p>
    <p>React 16 can return multiple elements ❤️</p>
  </>
);

// if your build tool goes crazy, do this…

const App = () => (
  <React.Fragment>
    <p>React 16 can return multiple elements ❤️</p>
    <p>React 16 can return multiple elements ❤️</p>
    <p>React 16 can return multiple elements ❤️</p>
  </React.Fragment>
);

See the Pen 2017-10-02-3 by Pawel Grzybek (@pawelgrzybek) on CodePen.

Nice! Isn’t it?! Find out about more really cool features added in the new version of React in this great Egghead course by Nik Graf.

Did you find it helpful? Consider to hit the share button below to make me more popular than I am! Have a great day you all 🥑

Comments

  • D
    Dean

    I usually wrap multiple elements with div or span tag, and it dose the trick.

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • M
      Matthew Brown

      facepalm

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
      • D
        Dean

        Why? is that wrong approach?

        👆 you can use Markdown here

        Your comment is awaiting moderation. Thanks!
        • Pawel Grzybek
          Pawel Grzybek

          The whole idea of of this post is to avoid wrapping multiple elements in a container tag. Just use one of the methods presented. above since today my friends and you will be fine. It generates way cleaner output markup and you won't struggle to work with modern layout systems like flexbox or grid.

          Have a great weekend :)

          👆 you can use Markdown here

          Your comment is awaiting moderation. Thanks!
          • A
            AndrewH

            Good work - this really helped me. I been fighting with this for a day!

            👆 you can use Markdown here

            Your comment is awaiting moderation. Thanks!
            • Pawel Grzybek
              Pawel Grzybek

              I am glad that you found it useful!

              👆 you can use Markdown here

              Your comment is awaiting moderation. Thanks!
    • R
      Rodrigo Iván García López

      Maybe you want to insert a coumple of <td/> inside its <tr> as an element variable, not using a <div> wrapping the td's would be a good idea.

      https://reactjs.org/docs/fr...

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
      • Pawel Grzybek
        Pawel Grzybek

        Of course. It is another really good use case. bunch of <li> elements inside a list can be another one. I can think of hundreds of them. Hopefully I explained the concept well and developers will take it from here…

        👆 you can use Markdown here

        Your comment is awaiting moderation. Thanks!
  • V
    Viktor Sundberg

    thanks man this was very helpful!

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      I am glad you found it helpful :)

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
  • I
    Ibsham Yousaf

    what if i use component name instead of p tag and there are multiple components to render in one component....plzz guide

    like

    but i am having error in this " super should be empty or function"

    import React from 'react';

    import ReactDOM from 'react-dom';

    import './App.css';

    import Image from './components/img';

    import Napp from './components/nav';

    class App extends React.Component {

    render() {

    return (

    <div>

    <image/>

    <napp/>

    </div>

    );

    }

    }

    ReactDOM.render(<app/>,document.getElementById('root'));

    export default App;

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      Hi.

      It doesn't matter if it is a HTML element or a React component. So...

       
      render() {
      return (
      <>
      <image/>
      <napp/>

      );
      }

      Hopefully that helps.

      Ps. Disqs converts the names of a components to lower case. I don't know ow to prevent that.

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
      • I
        Ibsham Yousaf

        thanks

        👆 you can use Markdown here

        Your comment is awaiting moderation. Thanks!
  • G
    Glory Arisah

    Please how do i access only one part of the return element

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      If you want to return a single element from React component, don't make one that returns multiple of them in the first place. I see no valid use case of making component returning multiple top level elements and force it to return just one.

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!

Leave a comment

👆 you can use Markdown here

Your comment is awaiting moderation. Thanks!