Sometimes, we want to render multiple React components in the React render() function.
In this article, we’ll look at how to render multiple React components in the React render() function.
How to render multiple React components in the React.render() function?
To render multiple React components in the React render() function, we wrap them with a fragment.
For instance, we write
<React.Fragment>
<h1>Page title</h1>
<ContentComponent />
{this.props.showFooter && <footer>(c) abc</footer>}
</React.Fragment>
to wrap our h1, ContentComponent and the footer with the React.Fragment fragment.
Then they’ll be rendered without any wrapping element.
Conclusion
To render multiple React components in the React render() function, we wrap them with a fragment.
