alisongaleon alisongaleon - 1 year ago 78
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 Source

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