React-Rails: Load initial array state with ajax - ruby-on-rails

Question

I've been following along some tutorials with React and i'm starting out building an application on my own. I've come across a situation regarding components and i'm wondering if theres a best practice for this scenario. Please note, I'm just using react-rails; no flux or whatever for now.
setting the initial state with an array whose values get set through ajax and have that array display in the initial render
Here's what i'm trying to do: (stripped down for simplicity)
var ShoutList = React.createClass({
getInitialState: function(){
return {shouts: []};
},
componentDidMount: function(){
var component = this;
$.get('/api/shouts.json', function(data){
component.setState({shouts: data});
});
},
render: function(){
return (
<div>
{this.state.shouts[0].shout}
</div>);
}
});
So if I have this right, the order in which things are run go as follows:
On load, getInitialState sets shouts to an empty array
Render gets called and errors out because of trying to access the shout property on an empty array
ComponentDidMount gets called and sets the state of shouts to the data received from the ajax call. **I get an error when I try to do this in ComponentWillMount **
Render gets called again because the state has changed, but this time shouts[0].shout would contain data.
So I error out at step 2 and my work around is as follows:
var ShoutList = React.createClass({
getInitialState: function(){
return {shouts: []};
},
componentDidMount: function(){
var component = this;
$.get('/api/shouts.json', function(data){
component.setState({shouts: data});
});
},
emptyShouts: function(){
return(<div>No Shouts Yet!</div>);
},
shoutsList: function(){
return(<div>{this.state.shouts[0].shout}</div>);
},
render: function(){
if(this.state.shouts.length > 0){
return this.shoutsList();
}else {
return this.emptyShouts();
}
}
});
This works exactly like I need it to, but is there a better way of setting the initial state's array value with ajax and having it load in the initial render without having to do this if statement?
Thanks!

Answer 1

Without using Flux, I'd say your implementation is one of the few ways to get around this problem. Another way would be to have the logic before your render's return:
...
render: function () {
var renderedShout;
if (typeof this.state.shouts[0] === "undefined") {
renderedShout = <div>No Shouts Yet!</div>;
} else {
renderedShout = <div>{this.state.shouts[0].shout}</div>;
}
return renderedShout;
}
The advantage of doing it this way is that you will only have one return which could make it clearer for a reader in the long run.

Answer 2

If you want, you can try this change in your pre-edit code:
var ShoutList = React.createClass({
getInitialState: function(){
return {shouts: []};
},
componentDidMount: function(){
var component = this;
$.get('/api/shouts.json', function(data){
component.setState({shouts: data});
}.bind(this), 'json');
},
render: function(){
return (
<div>
{this.state.shouts[0].shout}
</div>);
}
});
bind your $.get call to the component making the call. It should work as expected from there.