clicking on icon inside button of materialize-css react triggers onClick

Question

Clicking on the button triggers the onClick appropriately but clicking on the icon within the button triggers the onClick as well but without the right data (item.target.className and what not)

<button id={check} onClick={this.changeTimesButton} className="waves-effect waves-light btn"><i className="material-icons">check_box</i></button>

Is there anyway to disable the icon being able to be clicked

using materialize-css in react project

Answer 1

if u cannot handle event.target in this.changeTimesButton(event) :

set onClick() on icon tag then prevent the default action

    <button id={check} onClick={this.changeTimesButton} 
      className="waves-effect waves-light btn">
      <i className="material-icons" onClick={(e)=>{e.preventDefault()}}>check_box</i>
    </button>

UPDATE

you can use stopPropagation instead of preventDefault

for more details on stopPropagation and preventDefault see this :

What's the difference between event.stopPropagation and event.preventDefault?