title: A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object
body: <p>I'm building a small react js application and I get this error: </p>
  
  <blockquote>
    <p>Uncaught Error: Invariant Violation: exports.render(): A valid
    ReactComponent must be returned. You may have returned undefined, an
    array or some other invalid object.</p>
  </blockquote>
  
  <p>These are my source files: <strong>App.jsx</strong></p>
  
  <pre><code>var React = require('react');
  var Chats = require('./chats');
  var messages = {
    chatMessages: [{
      name: ' John Doe',
      message: ' Hey Lisa, how are you doing?'
    },{
      name: 'Lisa Johnson',
      message: 'Pretty good, how are you?'
    }]
  }
  var App = React.createElement(Chats, messages)
  React.render(App, document.querySelector('.container'));
  </code></pre>
  
  <p><strong>Chats.jsx</strong></p>
  
  <pre><code>var React = require ('react');
  var Chat = require ('./chat');
  
  var Chats = React.createClass({
    render:function(){
      var chats = this.props.chatMessages.map(function(chatProps){
        return &lt;Chat {...chatProps} /&gt;
      });
      return (
        &lt;div&gt;
          {chats}
        &lt;/div&gt;
      )
    }
  });
  
  module.exports = Chats;
  </code></pre>
  
  <p>And <strong>Chat.jsx</strong></p>
  
  <pre><code>var React = require ('react');
  
  var Chat = React.createClass ({
    render:function (){
    return
      &lt;div&gt;
        &lt;p&gt;{this.props.name}&lt;/p&gt;
        &lt;span&gt; {this.props.message} &lt;/span&gt;
      &lt;/div&gt;
  
  }
  });
  
  module.exports = Chat;
  </code></pre>
  
  <p>I think the problem is in my map function but I really want someone to tell me where I made the mistake.</p>