Why clicking svg menu icon returns empty object sometimes? [Solved]

Question

https://code.sololearn.com/WDCVotd7ZfAi/?ref=app

Edit: adding conditional statement to check

if e.target==e.currentTarget works fine ,

but I would like to know why empty object is returned when I have no onclick handler on any other element!

Edit2: Actually it doesn't matters which element is clicked as long as the click is registered on the icon , basically the problem was path and svg had different spaces

Answer 1

Bhavya it still doesn't works !

but I noticed a thing as you talked about space in svg ,the svgIcon has some fixed size and path has other size ,the difference is resulting in space between both ,and attaching onclick on path with a className gave me an idea of the problem, clicking on space around path inside svg outputs non empty object but clicking on actual path is outputting that empty object sometimes ,just need to remove that space around path which I don't know how to do!

Answer 2

Wrap the svg in a div and put onClick on that div, otherwise it will not work on the white space in your svg