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

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

on Feb 10, 2016

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:

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

Suggested posts: