firing onClick handler when click on component inside it

Question

when i click on button section its working fine, but the problem is when i click on Component section inside button then my function not firing

this.resetStates = this.resetStates.bind(this) ;

<button onClick={this.resetStates}>
    <NumberFormat/>
</button>

Answer 1

I use a CSS lot of the time with similar problems in svg. It might help you here too. You can put pointer-events: none to the inner component. This way the inner component is not clickable and every click event come to the outer button component. For example:

<button onClick={this.resetStates}>
  <div style={{pointerEvents: 'none'}}>
     <NumberFormat/>
  </div>
</button>

Is it helping you?