Is there a way to render multiple React components in the React.render() function?

Is there a way to render multiple React components in the React.render() function?

For example could I do:
import React from ‘react’;
import PanelA from ‘./panelA.jsx’;
import PanelB from ‘./panelB.jsx’;

React.render(

,
document.body
);

where React would render:
body
PanelA
PanelB

Currently I’m getting the error:
Adjacent JSX elements must be wrapped in an enclosing tag

while transpiling with browserify and babelify

Solutions/Answers:

Solution 1:

Since the React v16.0 release you can render an array of components without wrapping items in an extra element when you are inside a component:

render() {
  return [
    <li key="one">First item</li>,
    <li key="two">Second item</li>,
    <li key="three">Third item</li>,
    <li key="four">Fourth item</li>,
  ];
}

Remember only to set the keys.

In the ReactDOM.render you still can’t render multiple items because react needs a root. So you can render a single component inside the ReactDOM.render and render an array of items in the internal component.

Solution 2:

React >= 16.2

Since version 16.2 <React.Fragment /> (or <></> for short) was introduced, so you can use conditions. This is the preferable way.

return (
    <React.Fragment>
        <h1>Page title</h1>
        <ContentComponent />
        {this.props.showFooter && (
            <footer>(c) stackoverflow</footer>
        )}
    </React.Fragment>
)

React 16

Since React 16, you can return from the render() method a list of components. The trade of is you cant easily condition the render and need to add key attribute to each component in the list.

return [
    <h1 key="page-title">Page</h1>,
    <ContentComponent key="content" />,
    <footer>(c)stackoverflow</footer>
]

React < 16

In older versions of React, you can’t render multiple components without wrapping them in an enclosing element (tag, component).
eg:

return (
  <article>
    <h1>title</h1>
    <meta>some meta</meta>
  </article>
)

If you want to use them realy as just one element, you have to create a module from them.

Related:  Highlight text inside of a textarea

Solution 3:

Just wrap your multiple components into single tag. For example:

React.render(
  <div>
    <PanelA />
    <PanelB />
  </div>, 
  document.body  
);

Solution 4:

Prior to React 16, multiple top-level elements in the same render() would require you to wrap everything in a parent element (typically a <div>):

render () {
  return (
    <div>
      <Thing1 />
      <Thing2 />
    </div>
  )
}

React 16 introduced the ability to render an array of top-level elements (with a warning that they all must have unique keys):

render () {
  return ([
    <Thing1 key='thing-1' />,
    <Thing2 key='thing-2' />
  ])
}

React 16.2 introduced the <Fragment> element, which functions exactly like the <div> in the first example but doesn’t leave a pointless parent <div> hanging around the DOM:

import React, { Fragment } from 'react'

...

render () {
  return (
    <Fragment>
      <Thing1 />
      <Thing2 />
    </Fragment>
  )
}

There’s a shorthand syntax for it, but it isn’t supported by most tooling (e.g., syntax highlighters) yet:

import React from 'react'

...

render () {
  return (
    <>
      <Thing1 />
      <Thing2 />
    </>
  )
}

Solution 5:

If you wish to render multiple components out you need to nest them within one another in order to maintain the Tree-Like structure. This is explained on their docs page for Multiple Components

Related:  How to get progress from XMLHttpRequest

Ultimately as long as there is one Node at the top level it can work.

You could use just one DOM element such as a <div>

  <div>
    <PanelA />
    <PanelB />
  </div>

However as you create more complex apps and have more interlinking components you may find it best to wrap child components in a parent like so

import React from 'react';
import PanelA from './panelA.jsx';
import PanelB from './panelB.jsx';

var PanelHolder = React.createClass({
  render: function() {
    return (
      <div>
        <PanelA />
        <PanelB />
      </div>
    )
  }
});

And then in your main js file, you would do:

import React from 'react';
import PanelHolder from './panelHolder.jsx';

React.render( 
  <PanelHolder /> 
  document.body  
);

References