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

javascript – 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:

// Correct

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

Edit: Per Joe Clays comment about the Fragments API

// More Correct

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)

// Short syntax

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

More Detailed Explanation

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.
 ];
}

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

React element has to return only one element. Youll 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 cant 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 />
    }
},

Leave a Reply

Your email address will not be published.