Q:

React parent renders with initial state before successful ajax call sets state

I'm using React with webpack and babel for compiling jsx. I have a parent component that looks like this:
const Menu = module.exports = React.createClass({
    loadUser() {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', this.state.url, true);
        xhr.onload = function() {
            let data = JSON.parse(xhr.responseText);
            this.setState({
                user: data
            });
        }.bind(this);
        xhr.send();
     },

     componentDidMount() {
         this.loadUser();
     },

     getInitialState() {
         return {
             url: this.props.url,
             user: []
         };
     },

    render: function() {

        return (
            <div className="menu">
                 <Nav user={this.state.user} />
                      ...
            </div>
        );
    }

});

As you can see, I attempt to use this.setState(...) to set this.state.user to the data received from the XMLHttpRequest. However, when I try to access it in the child, Nav, by simply calling, console.log(this.props.user), only an empty array, i.e. [], is printed.
What am I doing wrong here? I've read the React docs and I'm stumped. In the following tutorial, data is fetched from the server and transferred to the child component in a manner similar to what I've done (above). Any help would be greatly appreciated. If I need to supply any additional code or context, let me know. Thanks.

A:

getInitialState is used at the first renderso it's normal it's complete before your ajax call since the ajax call is performed in ComponentDidMount which is triggered just after the first rendering.
Before the ajax call is empty your state.user will be empty, then when the data are received it should update your view with the new data.
In my opinion you're not doing anything wrong it depends on what you want to do. 
For example you could put a message in getinitialstate like mgs:"Please wait data are fetching" and remove this msg when your data arrive.
Otherwise if you absolutely need your data to be ready before rendering your component you can use that : https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html Read carefully it may not fit your use.
Talking for myself I would put a loading msg in getinitialstate and proceed the way you do.

