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( 
  

        

Answer 1

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 (
    
        
Page title
        
        {this.props.showFooter && (
            
(c) stackoverflow
        )}
    
)

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 [
    
Page
,
    ,
    
(c)stackoverflow
]

React < 16

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

return (
  

    
title
    some meta
  
)

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