alisongaleon alisongaleon - 3 months ago 8
React JSX Question

Button with FontAwesome child makes the button target value undefined

I can't seem to figure how to solve this problem that if you click a react-bootstrap button with a fontawesome icon as a child, the

onclick
target value
will be undefined.

But if you click just outside the text with the icon and still inside the button, the
onclick
handler will still work.

https://jsfiddle.net/utmcykcg/5/

Answer

The issue seems to be that event.target can change depending on where in the button you click. Using event.currentTarget instead should give you the results you're looking for.

onClick(e) {
  const btnValue = e.currentTarget.value
  alert(btnValue);
}

See also: What is the exact difference between currentTarget property and target property in javascript

Comments