title: React - Rendered item is not updating after initial render. When props change, should select different data
body: <p>Rendered a state that is not updating when props change. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    componentDidMount(){
          var count = 0;
          var dist = 0;
          (this.props.data).map(item =&gt; {
              if(item.type === this.props.selectedType){
                  return(
                      dist = dist + item.distance,
                      count++
                      )
                  }
              })
              this.setState({
                  avg: dist/count
              })
          }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried <code>shouldComponentUpdate</code> and <code>componentWillReceiveProps</code></p>
  
  <p>the state of <code>this.state.avg</code> has been initialised in constructor but when calling this state in <code>render</code> it renders once but doesnt update when prop of 'selectedType' is changed by a different component. </p>