The worm The worm - 1 month ago 7
React JSX Question

How do render react in the browser

I have a function that goes through some promises and setState like so:

}).then((future_users) => {
this.setState({future_users: future_users});
console.log(this.state.future_users, 'tsf');
});


this logs out an array of 3 objects
much further down inside my render method I have

<p><span id="users"></span></p>
{this.state.future_users.map(function(item){
return (<span>{item}</span>);
})}


however I get an error saying
Objects are not valid as a React child

where I can convert them into strings or so?

Answer

If what you said is true, an array of objects is what future_users is, then you you are trying to do <span> {object} <span> which wont work instead you need to set it to whatever property of the object you want to display. for example if your user had a userName property you could do:

<p><span id="users"></span></p> {this.state.future_users.map(function(item){ return (<span>{item.userName}</span>); })}

and it would work fine. you can't put the object itself in the render method.