Table of Contents

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, ...
   );
}

let componentWithFragmentElement = React.createElement(ComponentWithFragment);
let root = document.createElement('div');
document.body.append(root);
ReactDOM.render(componentWithFragmentElement , root );
  • The output:
Rendered by WebCode

1)

1)
https://reactjs.org/docs/fragments.html