Components Return One Node/Component
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.
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
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
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.
If you return two sibling components, the same error will occur.
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 | });