React – How to fix SyntaxError – Adjacent JSX elements must be wrapped in an enclosing tag

React element can return only one element. In case you have the following code, you will get “Adjacent JSX elements must be wrapped in an enclosing tag” syntax error.

var MyList = React.createClass({
  render: function() {
    return (
        <h1>something</h1>
        <div>
          something else
        </div>
    );
  }
});

To fix this, you can wrap multiple elements in one outer div as shown below:

var MyList = React.createClass({
  render: function() {
    return (
      <div>
        <h1>something</h1>
        <div>
          something else
        </div>
      </div>
    );
  }
});

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments