score:8

Accepted answer

the way you are doing it, you could validate the response state object in your render method, and if it is null/empty, then return <div>loading...</div>.

when your state is then updated based on the response, the component will automagically re-render. this time, the object will be populated and you can return your component html.

e.g.

render(){

    if (!this.state.response){
        return <div>loading...</div>
    }

    return (
        <div>proper stuff</div>
    );
}

edit on a site note, if you set the initial state in the constructor, you can make sure the object isn't empty, but just has null/empty values. this could also help depending what your render method is doing, e.g.

constructor(props){
    super(props);

    this.state = {
        response: {...}
    };
}

score:3

your render code should be

render(){
 return({this.state.response?
          <div> render your component here</div>: 
          <div> loading ... </div>});
}

this way your component would not render till it has the data and show loading ... text instead.


Related Query

More Query from same tag