<p>I started writing react.js code last March and the journey has been fun so far. But I couldn't help but notice that wrapping return values in my code with a "div tag" felt weird. So here's what I found:</p>
<ol>
<li>React return values can only take a single value so it is necessary to wrap all the JSX in an Html element.</li>
<li>"div" being the most popular comes to mind easily due to its versatility and ability to use anywhere.</li>
<li>Using "div" is semantically wrong as it involves your final code creating an extra DOM node which sometimes complicates everything in JavaScript.</li>
<li>There is an option of using and empty &lt;&gt; to wrap the elements. This makes sense, especially in cases where your component is returning some part of a table. Wrapping table "td" or "tr" values in a div can destroy its structure since "div" tags are block level elements.</li>
<li>React has an option of using React.Fragment or "Fragment" tag to group these multiple elements.</li>
<li>It is better to use "Fragment" tag especially when the code is mapping a collection of items. An empty &lt;&gt; tag cannot take a key value which is necessary after mapping in react.
Conclusion: Use "Fragment"
<a href="https://reactjs.org/docs/fragments.html">React documentation on Fragments</a></li>
</ol>


I started writing react.js code last March and the journey has been fun so far. But I couldn't help but notice that wrapping return values in my code with a "div tag" felt weird. So here's what I found:
1. React return values can only take a single value so it is necessary to wrap all the JSX in an Html element.
2. "div" being the most popular comes to mind easily due to its versatility and ability to use anywhere.
3. Using "div" is semantically wrong as it involves your final code creating an extra DOM node which sometimes complicates everything in JavaScript.
4. There is an option of using and empty <> to wrap the elements. This makes sense, especially in cases where your component is returning some part of a table. Wrapping table "td" or "tr" values in a div can destroy its structure since "div" tags are block level elements.
5. React has an option of using React.Fragment or "Fragment" tag to group these multiple elements.
6. It is better to use "Fragment" tag especially when the code is mapping a collection of items. An empty <> tag cannot take a key value which is necessary after mapping in react.
Conclusion: Use "Fragment"
<a href="https://reactjs.org/docs/fragments.html">React documentation on Fragments</a>

Using <Fragment> to wrap react component return values