Getting TypeError: _this2.props.handleClick is not a function when passing redux prop from container to presentational component in react

Question

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.

Could someone tell me how to do this correctly please?

I'm building a calculator, just started, this only has three actions so far, add, Record_input_1 and Record_Input_2.

containers/ButtonsContainer.js:

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(
            <Buttons handleClick={this.handleClick} />
     )
    }

    mapStateToProps = (state) => {
        return {
            inputValue1: state.inputValue1,
            inputValue2: state.inputValue2,
            answer: state.answer
        }
    }

    mapDispatchToProps = (dispatch) => {
        return bindActionCreators({
            onRecordInput1: Record_Input_1,
            onRecordInput2: Record_Input_2
        }, dispatch);
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ButtonsContainer);

components/Buttons.js

import React, { Component } from 'react';



class Buttons extends Component {


    render() {
        const buttonMaker = (buttons, row) => {
            for (let value of buttons) {
                row.push(<button onClick={() => this.props.handleClick(value)} key={value}>
                {value}
                </button> )
              }
        }

        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 (
            <div>
          <div>{row1}</div>
          <br />
          <div>{row2}</div>
          <br />
          <div>{row3}</div>

        </div>
        )
    }  
}



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) => {
    return {
        type: ADD,
        newAnswer: newInput1 + newInput2
    }
}

export const Record_Input_1 = (newInput1) => {
    return {
        type: RECORD_INPUT_1,
        newInput1
    }
}

export const Record_Input_2 = (newInput2) => {
    return {
        type: RECORD_INPUT_2,
        newInput2
    }
}

reducders/sum-reducer.js:

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) => {
    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;
    }
}

store.js:

import { combineReducers, createStore } from 'redux';
import { initialState, sumReducer } from './reducers/sum-reducer';


const rootReducers = combineReducers({
    sumReducer
})

export default createStore(rootReducers, initialState, window.devToolsExtension && window.devToolsExtension());

The buttons display ok, when I click on one I get this error: TypeError: _this2.props.handleClick is not a function for:

  8 | render() {
   9 |     const buttonMaker = (buttons, row) => {
  10 |         for (let value of buttons) {
> 11 |             row.push(<button onClick={() => this.props.handleClick(value)} key={value}
  12 |             {value}
  13 |             </button> )
  14 |           }

create a constructor in Buttons component and do console.log(this.props) — Priyesh Kumar
you should return a object from reducer instead of a array because your state is an object, not [] — Priyesh Kumar
When I created a constructor in Buttons and logged this.props, it returned an empty object. — meseek

nebuler nebuler · Accepted Answer · 2018-09-03T17:03:43

You are declaring mapStateToProps and mapDispatchToProps within ButtonsContainer. You are then passing those two methods to react-redux's connect as if they were declared outside of ButtonsContainer, hence they are undefined. Try moving them out of ButtonsContainer as shown here. It should look something like this:

class ButtonsContainer extends Component {
    ...
}

const mapStateToProps = (state) => {
    return {
        inputValue1: state.inputValue1,
        inputValue2: state.inputValue2,
        answer: state.answer
    }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        onRecordInput1: Record_Input_1,
        onRecordInput2: Record_Input_2
    }, dispatch);
 }

export default connect(mapStateToProps, mapDispatchToProps)(ButtonsContainer);

Getting TypeError: _this2.props.handleClick is not a function when passing redux prop from container to presentational component in react

1 Answers