React components can render one root element

• For instance, rendering multiple top-level elements is not permitted. So, we often wrap multiple instances of elements or dynamically generated list nodes inside divs or another wrapping element.
• This element forms the root, and everything else is rendered as a child. This approach is preferred if you are using the wrapped element for styling purposes. 
• But if the purpose is to merely act as a wrapper so that React can render multiple instances, then you are rendering an extra DOM node.  This problem is compounded if you are rendering many instances of a wrapper such as in this case where the only purpose is to render these three siblings at the top level. The wrapper div is rendered to legitimize the three siblings at the top and is excess baggage really. 
• This is not a healthy practice and leads to a bloated DOM unnecessarily. To prevent this problem, React provides Fragments, which is a feature that lets you render multiple sibling elements or components without incurring the cost of rendering an extra DOM element.