CODEWITHSUNDEEP
javascripthtmlreactjs
Balanjaneyulu K
Balanjaneyulu K

Reputation: 4324

FontAwesome icon onClick() event doesn’t work as expected

I am using the Font Awesome in my reach app. I have added the required dependencies and imported them. The icons show up, unfortunately, when I click the icon directly, nothing happens. Does anyone know why this happens, and how to fix it?

clearHandler = (e) => {
    e.preventDefault();
}
<FontAwesomeIcon
    icon={['far', 'times-circle']}
    aria-hidden="true"
    onClick={this.clearHandler}
    className={styles.clearButton}
/>

Upvotes: 1

Views: 1836

Answers (1)

Guilherme Lopes
Guilherme Lopes

Reputation: 4760

The onClick event definitely works, so I'm assuming you are adding the prevent default there so the click doesn't bubble up(??)

For this to work, you need to call e.stopPropagation() instead of e.preventDefault().

See an example here: https://codesandbox.io/s/nice-sea-fjxnn

If you comment out line 7 and uncomment line 8, you will see the desired behavior (if that's what you need).

In any case, the onClick works just fine.

Upvotes: 2

Related Questions