How to Use React Fragments to Return Multiple Elements in One Component

One common pattern in React apps is that you want to return multiple components in one element. Using fragments is the way to do this. When you wrap components inside a fragment, you do not add an extra DOM node outside the components that you want to render.

It is easy to use fragments, we just put:

return (
    <React.Fragment>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </React.Fragment>
);