How to return multiple elements from a React render method

Posted by Colin Morey in spotlight React

If you’ve developed an application using React, then you are familiar with the power of functional component-oriented design that React provides. During your development process, you might have ran into a situation where you have considered returning multiple elements from a single component React render() method or Array.map() expression. That seems like a pretty straightforward scenario but upon implementing, you will get the following error:

The error:

render() {
    return (
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>      
    );
}
JSX expressions must have one parent element.

Straightforward as it may seem, this error was thrown because React does not support this functionality, but does provide a solution. The reason behind the error is that your JSX code is generating a method with a return value, and any method in Javascript can only return one object or value. We can, however, return an array or another component encapsulating the rest.

The array solution

There are couple ways to address this problem. The first, available since React 16, is to return an array of elements. This is a common pattern in React. Using the javascript array literal syntax, we can return multiple components that will get merged into the parent component tree:

Using the array fix:

render() {
    return (
      [
        <li key="item_1">Item 1</li>,
        <li key="item_2">Item 2</li>,
        <li key="item_3">Item 3</li>
      ]
    );
}

One important caveat of this approach is that each element in your array should have a unique key property assigned, otherwise you will get the following subsequent warning from your compiler:

Warning: Each child in an array or iterator should have a unique "key" prop.

Your application will still compile and run without keys assigned, but to properly optimize the component tree React requires them so that each element in the array can be tracked and updated independently. Another caveat is that each element must follow with a comma and each string element must be wrapped in quotes, which will require some modification of your JSX.

The fragments solution

Another way to tackle this problem is using React fragments. To implement this solution we simply wrap the elements in a new React.Fragment component, giving us the single parent that React wants to see:

Using the fragments fix:

render() {
    return (
      <React.Fragment>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </React.Fragment>
    );
}

This method is recommended as a common pattern by the React team for components returning multiple elements. You will notice several syntactical advantages here:

  • Keys are not required
  • Commas are not necessary
  • String literals can be included as elements without quotes

Finally, we can use “null” components which are a shorthand syntax for the React.Fragment component:

Using the short syntax fix:

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

Choosing the correct solution

So, which of these solutions should be used? And how do they differ?

One good rule of thumb, from the developers of React themselves, is that arrays should be preferred when the resulting elements are a dynamic array. For example, a list of menu choices that changes based on context in your application.

For static lists of items that are not likely to change, using React.Fragment is the way to go.

You can read more about the feature and it’s nuances here.

spotlight React

Subscribe to the Logicdrop Sparks Newsletter

Join hundreds of fellow users for tips, deeps dives, and best practices for implementing business rules and automation.

Try Logicdrop Sparks risk-free for 30 days.

No credit card required. Have questions? Contact us.

closing x