How to return multiple elements inside React.render()?

Posted by Rohit Kumar | Updated on

Want to return multiple elements inside React.render()? In React < v16.0 the render method can only render a single root node. (update: this is changed in v16, see below). In your case, you're returning 3 nodes. To get around this you can wrap your 3 nodes in a single root node:

In React v16 it's possible for render() to return an array of elements. Like with other arrays, you’ll need to add a key to each element to avoid the key warning:

Another option is to use a Fragment. Fragments let you group a list of children without adding extra nodes to the DOM.


If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers