title: Why is ES6 treating this as a NaN?
body: <p>I'm using React and Redux to try to increase the value of a prop everytime a button is clicked. However the prop is being treated as a NaN for some reason.</p>
  
  <p>This is my reducer:</p>
  
  <pre><code>export default function(){
    return 0;
  }
  </code></pre>
  
  <p>And the other reducer:</p>
  
  <pre><code>export default function (state = null, action) {
      switch (action.type) {
          case 'VALUE_INCREMENTED':
              return action.payload;
              break;
      }
      return state;
  }
  </code></pre>
  
  <p>This is my action:</p>
  
  <pre><code>export const incrementValue = (val) =&gt;{
    console.log("You incrementend the value to: ", val+1);
    return {
      type: 'VALUE_INCREMENTED',
      payload: val+1
    }
  };
  </code></pre>
  
  <p>And this is is the container:</p>
  
  <pre><code>class Thermo extends Component{
    getValue(){
      return this.props.val;
    }
  
  
    render(){
      return(
            &lt;div&gt;
                &lt;Thermometer
                        min={0}
                        max={90}
                        width={10}
                        height={230}
                        backgroundColor={'gray'}
                        fillColor={'pink'}
                        current={this.props.val}
                /&gt;
                &lt;input type = "submit" onClick={() =&gt; this.props.incrementValue(this.props.val)}value="+"/&gt;
            &lt;/div&gt;
      )
    }
  }
  
  function mapStateToProps(state){
    return{
      val: state.val
    };
  }
  
  function matchDispatchToProps(dispatch){
    return bindActionCreators({incrementValue: incrementValue}, dispatch);
  }
  
  export default connect(mapStateToProps, matchDispatchToProps)(Thermo);
  </code></pre>