title: Pass function down to child Component in React
body: <p>I am trying to pass a function down to a child component in React. If I place the function within the ES6 class I have access to <code>this.props.dispatch</code>, but do not have access within <code>mapStateToProps</code></p>
  
  <p>Conversely when I define the function outside of the ES6 class I seem to have access to the function but not <code>this.props.dispatch</code></p>
  
  <p>Can someone identify what I am doing wrong to have both access to <code>this.props.dispatch</code> as well as having the function available in <code>mapStateToProps</code> function</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import DenomInput from '../denomInput/DenomInput.js';
  import * as actions from '../../actions/countActions';
  
  class CountableItems extends Component {
    constructor(props) {
      super(props);
      this.onDenomChange = this.onDenomChange.bind(this);
    }
  
    onDenomChange = (value, denom) =&gt; {
      this.props.dispatch(actions.increaseSum(value, denom));
      console.log(value);
    }
  
    render() {
      const props = this.props;
  
      let denomGroups = props.denoms.map(function (denom, i) {
        return (
          Object.keys(denom).map(function (key) {
            let denoms = denom[key].map(function (item, i) {
              return &lt;DenomInput denom={item} onDenomChange={props.onDenomChange} key={i}&gt;&lt;/DenomInput&gt;
            });
            return (&lt;div className="col"&gt;&lt;h2&gt;{key}&lt;/h2&gt;{denoms}&lt;/div&gt;)
          })
        );
      });
  
      return (
        &lt;div className="countable-item-wrapper"&gt;
          &lt;div className="row"&gt;
            {denomGroups}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state, ownProps) {
    return {
      denoms: state.count.denomGroups,
      onDenomChange: this.onDenomChange
    }
  }
  
  export default connect(mapStateToProps)(CountableItems);
  </code></pre>
  
  <p>Here is the component that renders <code>&lt;CountableItems&gt;</code></p>
  
  <pre><code>import React, { Component } from 'react';
  import CountableItems from '../components/countableItems/CountableItems.js';
  import CountSummary from '../components/countSummary/CountSummary.js';
  
  import "./Count.css";
  
  class Count extends Component {
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-8"&gt;
              &lt;CountableItems /&gt;
            &lt;/div&gt;
            &lt;div className="col-4"&gt;
              &lt;CountSummary /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>export default Count;</p>