To get around this issue, you may simply wrap an enclosing div, like so:
Adding extra JSX just to make the compiler happy was less than an ideal solution. First, adding unused elements onto a page adds a tiny performance hit. In large applications, this can result in a lot of unneeded divs being rendered onto the page. Second, adding extra divs might affect other elements on the page.
As of React 16.2, we can use Fragments to improve this situation, instead of returning a div place holder you can return a fragment:
React Fragment also provides a much cleaner and simpler syntactic sugar form,
<>. So the snippet above can be simplified like this:
Another way to get around the problem is to return a single array of elements, separated by a comma, like this:
If you are not using React Fragments then you definitely should. You can learn more about them here.