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: