Components Return One Node/Component

The render configuration value 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.

source code

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 ().

source code

An error will occur if more than one starting React node is attempted to be returned. If you think about it, the error occurs because returning two React.createElement() functions isn’t possible with JavaScript.

source code

Thus, the above code will result in the following error:

babel.js:62789 Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (10:3)
   8 |     return (
   9 |             <span>test</span>
> 10 |             <span>test</span>
     |    ^
  11 |     );
  12 |   }
  13 | });

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 starting component can be returned but that component can have unlimited children.

source code

If you return two sibling components, the same error will occur.

source code

VM7370 babel.js:62789 Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (10:2)
   8 |     return (
   9 |         <MyChildComponent/>
> 10 |         <AnotherChildComponent/>
     |   ^
  11 |     );
  12 |   }
  13 | });