CODEWITHSUNDEEP
reactjs
Jonathan Potter
Jonathan Potter

Reputation: 175

<i> tag icon in button causing event.target.value issues in react

I am using a fontAwesome icon on a button and it seems that sometimes my code correctly uses the value of the button element and sometimes looks for the value of the icon (i tag element) when the button is clicked. the following combination:

<button id="break-decrement" 
        value="-"
        onClick={this.handleBreakTime}>   <i class="fas fa-angle-double-down"></i> 
</button>

handleBreakTime() {
  let length = this.state.breakLen;
  let value = event.target.value;
  console.log(value);
  console.log(event.target.value);
  console.log(event.currentTarget.value);
}

logs this to the console when I don't click the icon: "-" "-" undefined

but logs this when I do click the icon: undefined undefined undefined

Is there a way to consistently get the value of the button when the icon is clicked on.

Upvotes: 2

Views: 1106

Answers (2)

Rashed Rahat
Rashed Rahat

Reputation: 2485

You have to pass event as parameter in the handleBreakTime function.

Please have a look on this solution: CodeSandbox example

Note: I have used functional based component just for simplicity. It'll work for both. Happy coding :)

Upvotes: 1

Vo Quoc Thang
Vo Quoc Thang

Reputation: 1396

Try this.

button > * {
  pointer-events: none;
}

Upvotes: 1

Related Questions