-1

I have a <div> with an onClick handler that contains a fontawesome icon. Clicking anywhere in the div returns the correct element ID. Clicking on the fontawesome icon returns no ID. In the console, clicking on the icon shows the element being clicked on is the svg itself and not the <div>. How do I get around this short of writing code for both the icon AND the div?

CodeSandBox Example

Elcid_91
  • 1,571
  • 4
  • 24
  • 50
  • 1
    Does this answer your question? [Click through div to underlying elements](https://stackoverflow.com/questions/3680429/click-through-div-to-underlying-elements). i.e. just use `pointer-events: none` in the svg – Rafael Tavares Jan 15 '21 at 13:35
  • As Rafael said, you must add this ` – Apostolos Jan 15 '21 at 13:40

1 Answers1

0

use e.currentTarget.id instead of e.target.id

onClick={(e) => alert(e.currentTarget.id)}
R.M. Reza
  • 725
  • 1
  • 8
  • 20