onClick function not calling a method

Question

I have a React project where a component SubmitButton is rendered when the property isSelectedNumber change its state to true. The component SubmitButton, which is a button you can click, will call a method when the button is clicked by using the onClick function and that will lead to the property isSubmitClicked change to true that the component NextButton will render.

The thing is that just the SubmitButton is rendered and when I click the button of the component SubmitButton it doesn't render the component NextButton.

This the part of the wrapper component where both components will be rendered if the conditions are true.

{this.state.isSelectedNumber ?  <SubmitButton  handleClickSumbmit={this.handleClickSumbmit}/>  : null}
 {this.state.isSubmitClicked ?   <NextButton /> : null}

This is the part of the SubmitButton Component where the onClick function should call the handleCliclkSubmit method to change the property state:

 <button type="button" onClick={this.props.handleClickSubmit}></button>

This is the handleClickSubmit method:

    handleClickSumbmit () {
      this.setState({
        isSubmitClicked: true
      });
  }

I was wondering if you have any idea what could be happening and how to solve it.

Answer 1

You have typo error

Change

  <button type="button" onClick={this.props.handleClickSubmit}></button>

To

   <button type="button" onClick={this.props.handleClickSumbmit}></button>

Also the function name is not meaningful in your code. Change handleClickSumbmit to handleClickSubmit wherever you have handleClickSumbmit

Also since you are using regular function you have to bind it in constructor. I hope you already did that.