I have the following simple code :
var data = [{ email: "bob@gmail.com" },{ email: "toto@gmail.com" }];
var User = React.createClass({
render: function ()
{
return
(
<li>
{this.props.email}
</li>
);
}});
var UserList = React.createClass({
render: function ()
{
var userNodes = this.props.data.map(function (user)
{
console.log(user.email);
return
(
<User email={user.email} ></User>
);
});
return
(
<ul>{userNodes}</ul>
);
}});
ReactDOM.render(<UserList data={data} />, document.getElementById('root'));
and I got this error:
"A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object."
Here, the problem is in this line.
return
(
<li>
{this.props.email}
</li>
);
You have put the starting parentheses on the next line so when your code is converted into plain javascript code, it will look something like this.
render: function () {
return; // A semicolon has been inserted.
(React.createElement("li", null, this.props.email)); // unreachable code
}
You can see that a semicolon has been inserted by Javascript while interpreting your code, so no value is returned from the render function and you are getting this error.
To avoid this situation, you need to put the starting parentheses after the return statement, so that Javascript won't insert a semicolon until a matching ending parentheses is found. Like this,
return (
<li>
{this.props.email}
</li>
);
Now if you look at the generated code, it will look something like this
render: function () {
return (React.createElement("li", null, this.props.email));
}
Also, change
return
(
<ul>{userNodes}</ul>
);
to
return (
<ul>{userNodes}</ul>
);
Here, is the working fiddle. JSFiddle
I have also fixed the warning,
Each child in an array or iterator should have a unique "key" prop.
by passing key in your User component.