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