title: Getting TypeError: _this2.props.handleClick is not a function when passing redux prop from container to presentational component in react
body: <p>Pretty new to Redux. I'm trying to pass a handleClick event as a prop from a container component to a presentational component, the handleClick event is supposed to call upon an action which has been received as a prop with mapDispatchToProps. </p>
  
  <p>Could someone tell me how to do this correctly please?</p>
  
  <p>I'm building a calculator, just started, this only has three actions so far, add, Record_input_1 and Record_Input_2. </p>
  
  <p>containers/ButtonsContainer.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Buttons } from '../components/Buttons'
  import { Record_Input_1 } from '../actions/sum-action';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  
  
  class ButtonsContainer extends Component {
      constructor(props) {
          super(props);
          this.handleClick = this.handleClick.bind(this);
      }
  
      handleClick(num) {
          return this.props.onRecordInput1(num)
      }
  
      render() {
          return(
              &lt;Buttons handleClick={this.handleClick} /&gt;
       )
      }
  
      mapStateToProps = (state) =&gt; {
          return {
              inputValue1: state.inputValue1,
              inputValue2: state.inputValue2,
              answer: state.answer
          }
      }
  
      mapDispatchToProps = (dispatch) =&gt; {
          return bindActionCreators({
              onRecordInput1: Record_Input_1,
              onRecordInput2: Record_Input_2
          }, dispatch);
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(ButtonsContainer);
  </code></pre>
  
  <p>components/Buttons.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  
  
  class Buttons extends Component {
  
  
      render() {
          const buttonMaker = (buttons, row) =&gt; {
              for (let value of buttons) {
                  row.push(&lt;button onClick={() =&gt; this.props.handleClick(value)} key={value}&gt;
                  {value}
                  &lt;/button&gt; )
                }
          }
  
          let row1 = [];
          let buttons1 = [1,2,3]
          buttonMaker(buttons1, row1)
  
  
          let row2 = [];
          let buttons2 = [4,5,6]
          buttonMaker(buttons2, row2)
  
  
          let row3 = [];
          let buttons3 = [7,8,9]
          buttonMaker(buttons3, row3)
  
          return (
              &lt;div&gt;
            &lt;div&gt;{row1}&lt;/div&gt;
            &lt;br /&gt;
            &lt;div&gt;{row2}&lt;/div&gt;
            &lt;br /&gt;
            &lt;div&gt;{row3}&lt;/div&gt;
  
          &lt;/div&gt;
          )
      }  
  }
  
  
  
  export default Buttons;
  
  actions/sum-actions/js:
  
  export const ADD = 'ADD';
  export const RECORD_INPUT_1 = 'RECORD_INPUT_1';
  export const RECORD_INPUT_2 = 'RECORD_INPUT_2';
  
  export const add = (newInput1, newInput2) =&gt; {
      return {
          type: ADD,
          newAnswer: newInput1 + newInput2
      }
  }
  
  export const Record_Input_1 = (newInput1) =&gt; {
      return {
          type: RECORD_INPUT_1,
          newInput1
      }
  }
  
  export const Record_Input_2 = (newInput2) =&gt; {
      return {
          type: RECORD_INPUT_2,
          newInput2
      }
  }
  </code></pre>
  
  <p>reducders/sum-reducer.js:</p>
  
  <pre><code>import { ADD, RECORD_INPUT_1, RECORD_INPUT_2 } from '../actions/sum-action'
  
  export const initialState = {
      inputValue1: '',
      inputValue2: '',
      answer: 0
  }
  
  export const sumReducer = (state = initialState, action) =&gt; {
      switch (action.type) {
          case ADD:
          return [
              ...state,
              {
                  answer: action.newAnswer
              }
          ]
          case RECORD_INPUT_1:
          return [
              ...state, 
              {
                  inputValue1: action.newInput1
              }
          ]
          case RECORD_INPUT_2:
          return [
              ...state, 
              {
                  inputValue2: action.newInput2
              }
          ]
          default:
          return state;
      }
  }
  </code></pre>
  
  <p>store.js:</p>
  
  <pre><code>import { combineReducers, createStore } from 'redux';
  import { initialState, sumReducer } from './reducers/sum-reducer';
  
  
  const rootReducers = combineReducers({
      sumReducer
  })
  
  export default createStore(rootReducers, initialState, window.devToolsExtension &amp;&amp; window.devToolsExtension());
  </code></pre>
  
  <p>The buttons display ok, when I click on one I get this error:
  <strong>TypeError: _this2.props.handleClick is not a function</strong>
  for:</p>
  
  <pre><code>  8 | render() {
     9 |     const buttonMaker = (buttons, row) =&gt; {
    10 |         for (let value of buttons) {
  &gt; 11 |             row.push(&lt;button onClick={() =&gt; this.props.handleClick(value)} key={value}
    12 |             {value}
    13 |             &lt;/button&gt; )
    14 |           }
  </code></pre>