Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

You should put your component between an enclosing tag, Which means:

// WRONG!return (      <Comp1 />    <Comp2 />)

Instead:

// Correctreturn (    <div>       <Comp1 />       <Comp2 />    </div>)

Edit: Per Joe Clay's comment about the Fragments API

// More Correctreturn (    <React.Fragment>       <Comp1 />       <Comp2 />    </React.Fragment>)// Short syntaxreturn (    <>       <Comp1 />       <Comp2 />    </>)

It is late to answer this question but I thought It will add to the explanation.

It is happening because any where in your code you are returning two elements simultaneously.

e.g

return(    <div id="div1"></div>    <div id="div1"></div>  )

It should be wrapped in a parent element. e.g

 return(      <div id="parent">        <div id="div1"></div>        <div id="div1"></div>      </div>      )

Your below jsx code get transformed

class App extends React.Component {  render(){    return (      <div>        <h1>Welcome to React</h1>      </div>    );  }}

into this

_createClass(App, [{    key: 'render',    value: function render() {      return React.createElement(        'div',        null,        React.createElement(          'h1',          null,          'Welcome to React'        )      );    }  }]);

But if you do this

class App extends React.Component {  render(){    return (        <h1>Welcome to React</h1>        <div>Hi</div>    );  }}

this gets converted into this(Just for illustration purpose, actually you will get error : Adjacent JSX elements must be wrapped in an enclosing tag)

_createClass(App, [{    key: 'render',    value: function render() {      return React.createElement(        'div',        null,       'Hi'      );     return React.createElement(          'h1',          null,          'Welcome to React'        )    }  }]);

In the above code you can see that you are trying to return twice from a method call, which is obviously wrong.

Edit- Latest changes in React 16 and own-wards:

If you do not want to add extra div to wrap around and want to return more than one child components you can go with React.Fragments.

React.Fragments (<React.Fragments>)are little bit faster and has less memory usage (no need to create an extra DOM node, less cluttered DOM tree).

e.g (In React 16.2.0)

render() {  return (    <>       React fragments.      <h2>A heading</h2>      More React fragments.      <h2>Another heading</h2>      Even more React fragments.    </>  );}

or

render() {  return (    <React.Fragments>       React fragments.      <h2>A heading</h2>      More React fragments.      <h2>Another heading</h2>      Even more React fragments.    </React.Fragments>  );}

or

render() { return [  "Some text.",  <h2 key="heading-1">A heading</h2>,  "More text.",  <h2 key="heading-2">Another heading</h2>,  "Even more text." ];}

React element has to return only one element. You'll have to wrap both of your tags with another element tag.

I can also see that your render function is not returning anything. This is how your component should look like:

var app = React.createClass({    render () {        /*React element can only return one element*/        return (             <div></div>        )    }})

Also note that you can't use if statements inside of a returned element:

render: function() {var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};    if(this.state.submitted==false) {        return <YourJSX />    } else {        return <YourOtherJSX />    }},