React - Fragment

About

A component / elements return always a fragment (A part of the React tree)

When a component returns multiple stacked components, you need to wrap them:

• around a div element
• or a React.Fragment component (to avoid adding an HTML element)

Example

Jsx

• Fully qualified name

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

• Simplified

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

React API

In the low-level React Javascript API. You would create an element with the tag React.Fragment

Example:

• The function component that returns a fragment of two elements: h1 and div

function ComponentWithFragment(props) {
   return React.createElement(
            React.Fragment, // a fragment element 
            null, // no key props
            React.createElement("h1", null, "Fragment all the way"), // first sub element
            React.createElement("div", null, "Is what we can"), // second sub element, ...
   );
}

• The root rendering

let componentWithFragmentElement = React.createElement(ComponentWithFragment);
let root = document.createElement('div');
document.body.append(root);
ReactDOM.render(componentWithFragmentElement , root );

• The output:

¹⁾