Components Return One Node/Component
The render() method defined when creating a component should return only one React node (or, component). This one node/component can contain any number of children. In the code below the <reactNode> is the starting node. Inside of this node any number of sibling and child nodes can be returned.
See the Pen rvoQGN by Bunlong (@Bunlong) on CodePen.
Note that if you want to return React nodes on more than one line (taking advantage of whitespace) you will have to surround the returned value in (). In the code below the JSX defining (i.e. rendered) the MyComponent is returned in ().
See the Pen LmMXQx by Bunlong (@Bunlong) on CodePen.
An error will occur if more than one React node is returned. If you think about it, the error occurs because returning two React.createElement() functions isn’t possible with JavaScript as below:
See the Pen MGZzGN by Bunlong (@Bunlong) on CodePen.
The above code will result in the following error:
Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing
return (
<span>test</span>
<span>test</span>
);
Commonly, developers will add a wrapping element <div> element to avoid this error.
This issue also concerns components. Just like React nodes, if you are returning a component, only one component can be returned but that component can have unlimited children.