How to stop element inside a functional component from bubbling up to the body element? [Solved]

Question

In the following code if you click on body the element disappears but I want that if I click on element , particularly those 3 dots it shudn't disappear and I tried using e.stopPropagation() but it doesn't work for some reason that I don't understand

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

Answer 1

Finally found a solution,
https://www.google.com/url?sa=t&source=web&rct=j&url=https://github.com/facebook/react/issues/4335&ved=2ahUKEwjnrr-3tP3qAhXt73MBHeqlDo8QFjAEegQIBBAI&usg=AOvVaw2UHUatMBsQBZWhjGkwUKip

Answer 2

You can see what element was clicked on with e.target. using e.target.id you can identify then handle what functions you want to run accordingly.

Answer 3

JME it prints nothing

Answer 4

It will print nothing if the element has no id

Answer 5

JME oh yea ,thks I thought id meant something else!! And it definitely targets that element on click as I have looked out and even styled the dots but stopPropagation() doesn't works just