ReactJS onClick arguments not getting passed to parent component

Question

I have a component with an injected Mobx store that has the following method:

constructor(props) {
  super(props)

  this.state = {
    propertyChangeNotifications: true,
    smsNotifications: false
  }
}

updateNotifications = (type, value) => {
  this.props.uiStore.updateProfile(type, value)
}

I am passing this method as a prop to a child component:

<ProfileDetails {...this.props.uiStore.profile} updateNotifications={()=> this.updateNotifications()} />

The child component has another method:

constructor(props) {
  super(props)

  // Get profile data from props
  const {
    propertyChangeNotifications,
    smsNotifications,
    person: {
      fiscalId,
      residentialAddress,
      name,
      lastName,
      phoneNumber,
      type,
      email
    }
  } = props

  // Set state according to props
  this.state = {
    name: name,
    lastName: lastName,
    fiscalId: fiscalId,
    residentialAddress: residentialAddress,
    phoneNumber: phoneNumber,
    type: type,
    email: email,
    propertyChangeNotifications: propertyChangeNotifications,
    smsNotifications: smsNotifications
  }
}

handleCheckbox = (type) => {
  this.props.updateNotifications(type, !this.state[type])
  this.setState({
    [type]: !this.state[type]
  })
}

That I am passing to a semantic UI checkbox component:

<Checkbox toggle label="Notify via SMS " checked={smsNotifications} onChange={()=> this.handleCheckbox('smsNotifications')} />

Now what happens is that the Checkbox method (this.handleCheckbox) gets called with the correct argument. Then the this.props.updateNotifications method gets called with the correct arguments as well, but the function in the parent component (updateNotifications), gets called with undefined, undefined.

What am I doing wrong?

Lojka · Accepted Answer · 2017-04-26 09:26:30Z

1

I think you should pass the function itself, not "invoke the function". Delete () here.

<ProfileDetails
    {...this.props.uiStore.profile}
    updateNotifications={this.updateNotifications}
/>

answered Apr 26, 2017 at 9:26

Lojka

1678 bronze badges

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

Comments

Mayank Shukla · Accepted Answer · 2017-04-26 09:29:25Z

1

Issue is, at all the places you are binding the method twice, one by using

this.updateNotifications={() => this.updateNotifications()} //here you are calling the function with no parameter.

And one by:

updateNotifications = () =>

Just remove the first way from all the places, it will work.

Simply use:

this.updateNotifications={this.updateNotifications}

and define the function by using arrow function:

updateNotifications = () =>

answered Apr 26, 2017 at 9:29

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Collectives™ on Stack Overflow

ReactJS onClick arguments not getting passed to parent component

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