title: componentWillMount not updating state based on props initially
body: <p>I  have 1 component, which receives a prop from the parent component, the prop is a firebase Array of objects. </p>
  
  <p>Something like <code>[{date:"string", value:"number"},{...},{...}...]</code></p>
  
  <p>My idea is to have the array of objects and loop it using a cycle and display the average of some values in a <code>&lt;p&gt;&lt;/p&gt;</code> tag</p>
  
  <p>So I did this </p>
  
  <pre><code>componentDidMount(){
     let sum = 0 , avr;
     for(let i = 0; i &lt; this.props.fuelD.length; i++){
       sum += parseInt(this.props.fuelD[i].value);
     }
     avr = ( sum / this.props.fuelD.length).toFixed(2);
  
     this.setState({averageFuelConsumption:avr})
  }
  </code></pre>
  
  <p>the JSX is this </p>
  
  <pre><code>&lt;p&gt;Average: {this.state.averageFuelConsumption}&lt;/p&gt;
  </code></pre>
  
  <p>So the problem I'm getting is this ... </p>
  
  <p>On the initial (first) mounting for <code>{this.state.averageFuelConsumption}</code> I  get a <code>NaN</code> ..  but when I load some other component and then load the old one I get the average value calculated.</p>
  
  <p>I know about the componentWillReciveProps and other methods ...  but I don't know how to use then I this case ... and also my idea is that the props itself will be populated later on and I  want dynamically to calculate the average .. each time a new object is written in the database and then pulled and loaded as a prop in the parent component.</p>