Click event for React FontAwesome icon

1

I’ve added a click event to a FontAwesome icon that checks the icon’s classList and performs a function according to what it finds. Unfortunately, it looks like the classList is dependent upon what part of the icon the user clicks. I’ve added a console.log statement for the event.target and the event.target.classList so I can see what’s going on, and here’s what I’ve found. If the user clicks directly on the white space just outside the check mark, the event.target.value is:

<svg class="checkin-icon green" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" icon="[object Object]" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">

and the event.target.classList is:

DOMTokenList [ "checkin-icon", "green" ]

This is what I want to see! If, however, the user clicks directly on the lines of the check mark, what we get instead is:

<path d="M173.898 439.404l-166.4-….207 9.997-36.204-.001z">

and

DOMTokenList []

This does me no good whatsoever.
This looks like this is specific to React’s FontAwesome package. When I do the same thing in standard HTML/JS with an <i> element, everything works just fine, regardless of where I click.
I’ve tried wrapping the icon in a span to get the same event.target regardless of click area, and I get the same result. I tried wrapping it in a div, also the same result. What can I do to make the click event the same regardless of what part of the icon the user clicks? Or is there a way to integrate the standard <i> icon into React without having to use the React FontAwesome package?

2

That’s not a font awesome issue, that’s how it works :slight_smile:

If you have the following:

<button>
  <span>Text</span>
</button>

and you have an event listener listening for clicks on the button, then if you click on the text on that button the event.target will point to the span, not the button.

3

So I was not able to determine why I get a different event target based on where I click on the icon with the React FontAwesome package, but I was able to get the standard <i> tag working with the FontAwesome CDN. I thought this wasn’t possible at first, because I tried the usual method of linking the CDN in the index.html file to no effect. However, turns out that I just had a bad CDN link, and it actually works as expected with a correct one.