CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-thunk
bikky barnwal
bikky barnwal

Reputation: 173

React Redux this.props.getClasses is not a function

I am trying to pass action with mapDispatchToProps to component, when i am trying to use getClasses as this.props.getClasses(). I am getting Failed prop type: The prop getClasses is marked as required in HierarchySelect, but its value is undefined. and on 'section' select component is crashing with TypeError: this.props.getClasses is not a function

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const { Fragment } = React;
export class HierarchySelect extends Component {
  constructor (props) {
    super(props);
    this.state = {
      sections: [],
      section: '--',
    };
  }

  handleChange (value, type, error) {
    switch (type) {
      case 'section':
        this.setState({
          section: value
        });
        this.props.getClasses({ type: '', data: '' });
        break;
      default:
    }
  }

  render () {
    return (
      <Fragment>
        <select id="lang" className="section" onChange={e => this.handleChange(e.target.value, 'section')} value={this.state.section}>
          {['--', ...this.state.sections].map(d => <option key={d} value={d}>{d}</option>)}
        </select>
      </Fragment>
    );
  }
}

HierarchySelect.propTypes = {
  deptHierarchy: PropTypes.object.isRequired,
  createHierarchy: PropTypes.func.isRequired,
  id: PropTypes.number.isRequired,
  getClasses: PropTypes.func.isRequired
};

export const mapStateToProps = (state, props) => ({
  user: state.getUser
});

export const mapDispatchToProps = dispatch => ({

  getClasses: (data) => {
    dispatch(data);
  }

});

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

Upvotes: 1

Views: 997

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281774

In mapDispatchToProps you are not returning the dispatch in getClasses. You need to write it like

export const mapDispatchToProps = dispatch => ({
    getClasses: (data) => {
       return dispatch(data);
    }
});

or 

export const mapDispatchToProps = dispatch => ({
  getClasses: (data) => dispatch(data);
});

Also you need to import the connected component which is the default export in your case

import HierarchySelect  from './hierarchy-dropdowns';

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

handleChange is not binded to component this instance.So, you getting props as undefined.

Define handleChange with

Arrow function which do lexical this binding.

handleChange = (value, type, error) =>{
            this.props.getClasses();
        }
      }

OR

In constructor do this binding with bind:

constructor(){

   this.handleChange = this.handleChange.bind(this);
}

Upvotes: 0

Related Questions