1

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.

Jonathan Potter
  • 147
  • 1
  • 10

2 Answers2

1

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 :)

Rashed Rahat
  • 2,357
  • 2
  • 18
  • 38
0

Try this.

button > * {
  pointer-events: none;
}
Vo Quoc Thang
  • 1,338
  • 1
  • 4
  • 5
  • 1
    This is what worked. I added it to the tag like this: – Jonathan Potter Mar 11 '21 at 18:40
  • Thanks, @JonathanPotter -- this solution worked for me. It also is more succinct than `onClick={e=> e.stopPropagation(); }`. Is there any convention or reason to choose one over the other, or just preference? – Tee Jun 09 '22 at 16:19