A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object

Question

I'm building a small react js application and I get this error:

Uncaught Error: Invariant Violation: exports.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

These are my source files: App.jsx

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')); 

Chats.jsx

var React = require ('react'); var Chat = require ('./chat');  var Chats = React.createClass({   render:function(){     var chats = this.props.chatMessages.map(function(chatProps){       return <Chat {...chatProps} />     });     return (       <div>         {chats}       </div>     )   } });  module.exports = Chats; 

And Chat.jsx

var React = require ('react');  var Chat = React.createClass ({   render:function (){   return     <div>       <p>{this.props.name}</p>       <span> {this.props.message} </span>     </div>  } });  module.exports = Chat; 

I think the problem is in my map function but I really want someone to tell me where I made the mistake.

Answer 1

I downloaded your code from GitHub. The problem was, as I suspected, wrapping components in parentheses on the return. From your updated code above, you did not do this on the Chat component. This is necessary because the transformed value of React.createElement will reside on the next line after the return, never actually running. Here's the altered function:

var Chat = React.createClass({   render: function () {     return (       <div>         <p>{this.props.name}</p>         <span> {this.props.message} </span>       </div>     );   } }); 

Also, for what it's worth, your App component is redundant. You could just do this:

React.render( <Chats {...messages} />, document.querySelector( '.container' ) );