How to resolve undefined props in reactjs

Question

This is child component

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import leftNavigation from '../actions/leftNavigation';

class AddBorrowers extends Component {
     constructor(props){
        super(props);
     }

     render(){
          return(
             <div className={this.props.classValue + ' ' + 'borrowerForm'} 
                onClick={() => {
                    this.props.sendActions('hide Add Borrrowers Form')
                }
             }>
             </div>
   )
 }

}

this is my BorrowersParent Controller

class BorrowersParent extends Component {
constructor(props){
     super(props); 
}

 sendActions (data) {
      switch(data){
          case 'hide Add Borrrowers Form':
              console.log(this.props);
          break;
      }
 }

  render(){
    return(
        <div className={this.props.borrowersParent}>
             <AddBorrowers classValue={this.props.addBorrowers} sendActions={this.sendActions}/>

        </div>
    );
  }

}

this is my mapStateToProps and mapDispatchToProps

function mapStateToProps(state) {
      return {
          addBorrowers: state.parentReducer.ui_state.addBorrowers,
}}

function mapDispatchToProps(dispatch){
      return bindActionCreators({
            leftNavigation: leftNavigation}, dispatch);
}

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

Note: Both AddBorrowers Component and BorrowersParent are located in same file.

On triggering onClick in the AddBorrowers component, 'this.props' keeps on returning undefined from the sendActions method located in BorrowersParent.

please I need to stop getting undefined from 'this.props', how do I accomplish this?? I need onClick event to trigger a dispatch()??

sendActions is a callback. It should be bound to proper `this`. — Estus Flask, Jan 10 '19 at 11:29

score 0 · Accepted Answer · answered Jan 10 '19 at 11:30

0

Either you use arrow function on sendActions:

 sendActions = (data) => {
      switch(data){
          case 'hide Add Borrrowers Form':
              console.log(this.props);
          break;
      }
 }

or you bind this method in constructor:

constructor(props){
     super(props);
     this.sendActions = this.sendActions.bind(this)
}

Without the above, the context of this changes during the click event, and therefore this.props doesn't exist.

answered Jan 10 '19 at 11:30

Liren Yeo

3,215
2
20
41

Ok .. let me quickly test it – Olatunji Odelade Jan 10 '19 at 11:32
Waoo! that totally resolved it, I need to go through the question I duplicated ... – Olatunji Odelade Jan 10 '19 at 11:37
1

glad that helped. arrow function creates lexical binding instead of dynamic binding. With lexical binding, ‘this’ context stays at wherever it was defined. – Liren Yeo Jan 10 '19 at 11:43

How to resolve undefined props in reactjs

1 Answers1