Building fragments of JSX
React 16 introduced the concept of JSX fragments. Fragments are a way to group together chunks of markup without having to add unnecessary structure to your page. For example, a common approach is to have a React component return content wrapped in a <div> element. This element serves no real purpose and adds clutter to the DOM.
Let's look at an example. Here are two versions of a component. One uses a wrapper element, and one uses the new fragment feature:
import * as React from "react";
import * as ReactDOM from "react-dom";
import WithoutFragments from "./WithoutFragments";
import WithFragments from "./WithFragments";
const root =
ReactDOM.createRoot(document.getElementById("root"));
root.render(
<div>
<WithoutFragments />
<WithFragments />
</div>
);