here is my situation on React.js

I have a function on my App.js call selectNumberOfPeople,

then In my child ponent ( call General) I had a button as:

<button className="selectedNumberOfPeopleButton" onClick={this.selectedNumberOfPeople} value="1">
      1
</button>

which was displaying the value in the console on click.

Works perfectly.

I want to use a button from Material UI instead now, so I have replace my button with:

<RaisedButton className="selectedNumberOfPeopleButton" 
    onClick={this.props.selectedNumberOfPeople}
    value="1" 
    label="1" 
    labelPosition="before"
    primary={true}
/>

But the value doesnt display anymore int he console when using this . . .

though the function being in the parent ponent I do pass it by:

<General selectNumberOfPeople={this.selectNumberOfPeople} selectedPanel={this.showPanelAndHideOthers} />

and I tried to updated my child ponent ( General.js) like:

<RaisedButton selectNumberOfPeople={this.props.selectNumberOfPeople}
    className="selectedNumberOfPeopleButton" 
    onClick={this.props.selectedNumberOfPeople}
    value="1" 
    label="1" 
    labelPosition="before"
    primary={true}
/>

but it's still not working....

For your information,

the selectNumberOfPeople is in App.js as

selectNumberOfPeople(value) {
console.log('select number of people');
// update the state and provide a callback handler to be called after the state is updated.
// referencing the state before the call back function
// () => {
//   console.log(this.state.numberOfPeople)
// })
// will leave the state with the same value as before the setState function is called.
this.setState(
  {
    numberOfPeople: value,
  },
  () => {
    console.log(this.state.numberOfPeople);
  }
);

}

and in my general.js (child ponent)

selectedNumberOfPeople(e) {
  this.props.selectNumberOfPeople(e.target.value);

  const list = document.getElementsByClassName('selectedNumberOfPeopleButton');
  for (let i = 0; i < list.length; i++) {
    list[i].classList.remove('hover');
  }

  this.toggleSelectedButtonState(e);
}

Does anyone have any guidance in what I'm doing wrong ?

It will be super !!

Many thanks !

here is my situation on React.js

I have a function on my App.js call selectNumberOfPeople,

then In my child ponent ( call General) I had a button as:

<button className="selectedNumberOfPeopleButton" onClick={this.selectedNumberOfPeople} value="1">
      1
</button>

which was displaying the value in the console on click.

Works perfectly.

I want to use a button from Material UI instead now, so I have replace my button with:

<RaisedButton className="selectedNumberOfPeopleButton" 
    onClick={this.props.selectedNumberOfPeople}
    value="1" 
    label="1" 
    labelPosition="before"
    primary={true}
/>

But the value doesnt display anymore int he console when using this . . .

though the function being in the parent ponent I do pass it by:

<General selectNumberOfPeople={this.selectNumberOfPeople} selectedPanel={this.showPanelAndHideOthers} />

and I tried to updated my child ponent ( General.js) like:

<RaisedButton selectNumberOfPeople={this.props.selectNumberOfPeople}
    className="selectedNumberOfPeopleButton" 
    onClick={this.props.selectedNumberOfPeople}
    value="1" 
    label="1" 
    labelPosition="before"
    primary={true}
/>

but it's still not working....

For your information,

the selectNumberOfPeople is in App.js as

selectNumberOfPeople(value) {
console.log('select number of people');
// update the state and provide a callback handler to be called after the state is updated.
// referencing the state before the call back function
// () => {
//   console.log(this.state.numberOfPeople)
// })
// will leave the state with the same value as before the setState function is called.
this.setState(
  {
    numberOfPeople: value,
  },
  () => {
    console.log(this.state.numberOfPeople);
  }
);

}

and in my general.js (child ponent)

selectedNumberOfPeople(e) {
  this.props.selectNumberOfPeople(e.target.value);

  const list = document.getElementsByClassName('selectedNumberOfPeopleButton');
  for (let i = 0; i < list.length; i++) {
    list[i].classList.remove('hover');
  }

  this.toggleSelectedButtonState(e);
}

Does anyone have any guidance in what I'm doing wrong ?

It will be super !!

Many thanks !

• javascript
• reactjs
• react-props

2 Answers 2

Use this.props.selectNumberOfPeople not selectedNumberOfPeople.

 <RaisedButton
   className="selectedNumberOfPeopleButton" 
   onClick={this.props.selectNumberOfPeople}
   value="1" 
   label="1" 
   labelPosition="before"
   primary={true}
/>

you can also try onClick={()=>this.props.selectedNumberOfPeople}