React Passing Component Function - cannot use in function

Question

I am attempting to pass a function down to a child component in a react router. I've figured out how to use render to send my props through and am using withRouter to make them available to my current state.

I cannot get the function to pass through to another function defined by the component receiving it.

Sample code below - kinda chopped up

// generic class with a router attempting to pass a function to a child
class App extends Component{
...
modalLogin = () => {
    console.log('modal login called')
    this.setState({modalLoginTrigger:true})
}

render(){
   render(
   <router> 
      <switch> 
         <Router ....more paths>  
         <Route path='/product/:_id' render={(props) =>(<ProductPage onModalLogin={this.modalLogin} />)}/>
      </siwtch>
   </router>)

ProductPage - receiving all of the parent props correctly, but not connecting the addToBinder() function to this.props.onModalLogin

class ProductPage extends Component {
    addToBinder(){
        this.props.onModalLogin()
    }

    render() {
       <div>
           <a className="cb_binder-link__add-remove col-xs-6" onClick={this.addToBinder} href="#">
       </div>
}
export default withRouter(ProductPage) ;

When my onclick function in my anchor is called, I am getting a

TypeError: Cannot read property 'props' of undefined This is coming from addToBinder()

When I call the onModalLogin function from the render itself, it works.

class ProductPage extends Component {
    addToBinder(){
        this.props.onModalLogin()
    }

    render() {
       <div>
           <a className="cb_binder-link__add-remove col-xs-6" onClick={this.props.onModalLogin} href="#">
       </div>
}
export default withRouter(ProductPage) ;

I want to be able to conduct business logic in addToBinder before calling onModalLogin - e.g. check if the user is logged in, prompt for a login if not. How do i get this to connect?

Dal · Accepted Answer · 2018-04-16 00:09:18Z

1

It looks like you need to bind this to your addToBinder function, so try: onClick={() => this.addToBinder()} or onClick={this.addToBinder.bind(this)}

Or actually, look at how you defined modalLogin, just do the same thing for addToBinder, that autobinds this to the function so you don't have to do either of the above methods. That is why it works when you just pass this.modalLogin to onClick.

answered Apr 16, 2018 at 0:09

Dal

17410 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

giveemheller · Accepted Answer · 2018-04-16 00:28:46Z

0

As it turned out, I needed to bind my onClick to This

class ProductPage extends Component {
   addToBinder(){
      this.props.onModalLogin()
   }   

   render() {
       <div>
           <a  onClick={this.props.onModalLogin.bind(this)} href="#">
       </div>
   }
}

Following up on the other answer provided by Dal, redefining the addToBinder function, passed the scope up to the parent.

addToBinder = () => {
    this.props.onModalLogin()
}

This works cleanly as well.

answered Apr 16, 2018 at 0:28

giveemheller

1061 silver badge8 bronze badges

Collectives™ on Stack Overflow

React Passing Component Function - cannot use in function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related