Wepack error : Adjacent JSX elements must be wrapped in an enclosing tag

Question

After creating a new component and using it in my Main component and running webpack i get the error

Adjacent JSX elements must be wrapped in an enclosing tag

Here's my code snippet:

var React = require('react');
var Nav = require('Nav');

var Main = React.createClass({
  render : function(){
    return (
      <Nav />
      <h2>Main Component</h2>
    );
  }
});

Answer 1

When there are multiple elements, you need to wrap it so it's only returning one:

var Main = React.createClass({
  render: function() {
    return (
      <div>
        <Nav />
        <h2>Main Component</h2>
      </div>
    );
  }
});

Answer 2

The error message is pretty self-explanatory: You can't return

(
  <Nav />
  <h2>Main Component</h2>
)

because they are two components. Wrap them up in something else before returning it.

Answer 3

It Should be wrapped by a root Element

   <div>
     <Nav/>
     <h2>Main Component</h2>
  </div>