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

Question

For example could I do:

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

React.render( 
  <PanelA />
  <PanelB />, 
  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

Answer 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.

UPDATE

Now from the 16.2 version you can use the Fragments

  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }

Short syntax

  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }

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.

Answer 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.

Answer 3

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

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

Answer 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 />
    </>
  )
}

Answer 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

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  
);

Answer 6

You can do it like this too.

const list = [item1, item2]
const elements = (
    <div>
      {list.map(element => element)}
    </div>
  );
ReactDOM.render(elements, document.body);

Answer 7

this.propsTextBox.value = this._context.parameters.textBoxProperty.raw || "";
var elements = new Array<React.SFCElement<any>>();
elements.push(React.createElement(
                TextField, 
                this.propsTextBox
            ));
elements.push(React.createElement(
    Label, 
    this.propsLabel
));

ReactDOM.render(
    elements,  
    this._container
);

Answer 8

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