title: React - Uncaught Invariant Violation:
body: <p>When I run my code on browser, I'm getting this error message. </p>
  
  <blockquote>
    <p>Uncaught Invariant Violation: MyComponent.render(): A valid React
    element (or null) must be returned. You may have returned undefined,
    an array or some other invalid object.</p>
  </blockquote>
  
  <p>I'm using Atom as my code editor and running on a chrome web server. Here is my code.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="react-comp"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
      var MyComponent = React.createClass({
        render: function() {
          return
            &lt;div&gt;
              &lt;h1&gt;{this.props.text}&lt;/h1&gt;
  
            &lt;/div&gt;;
        }
      });
  
      ReactDOM.render(
        &lt;div&gt;
          &lt;MyComponent text="Hello World"/&gt;
          &lt;MyComponent text="Hello"/&gt;
        &lt;/div&gt;  
      , document.getElementById('react-comp'));
  
  
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>It might be a jsx transforming issue? or any other thing? </p>