Empty state value for initial call in reactJs
<p>When the initial call is made the value is fetched using the api from the server but when I set the value to a state initially it is coming empty but from next iteration value is getting  coming fine. What is reason behind this and how to overcome this. Below is the code for the same. Variable sampleData[0]  value is coming empty and rest value of the array is coming as NaN as per the code. </p>

<pre><code>var sampleData = [];
var Sample = React.createClass({

   getInitialState: function() {
        return {  resValue : {} };
     }, 

    componentDidMount: function(){
            this.update();                                               
    },

    update: function(){
            new plotMovingLine( document.getElementById("movingLine"),[[0]], lineOptions);
                this.getRandomData();
         setTimeout(this.update, 2000);
   },

    getRandomData: function() {

         var value=0,cal=0;
         this.getData();                

     console.log(this.state.resValue);  //Initial object value displaying empty

         if(sampleData.length == 0 )
       {    sampleData[0]=this.state.resValue; 
            console.log(sampleData[0]);  }
            else{   
                    value=sampleData[sampleData.length-1].val;
                    cal= this.state.resValue.val-value;
                    sampleData.push({"val":cal});        
            }
   },

   getData: function(){         
        this.serverRequest = $.get("http://localhost:8088/data", function(data) {                                                       
                this.setState({
                            resValue: data
                });
            }.bind(this));             
   },

   render: function() {
       //view 
        }
});
</code></pre>

<p>Below is the image from the console of the above code.</p>

<p><a href="https://i.stack.imgur.com/0owO7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0owO7.png" alt="Image"></a></p>