Using element ID's in React app

[STurbiarz]

Hello! I have a dilemma…

<element id="some_id" />


  const clickListener = (e) => {
    if (e.target.id !== `some_id`) {
      doSomeStuff();
    }
  };
  useEffect(() => {
    document.addEventListener(`click`, clickListener);
    return () => {
      document.removeEventListener(`click`, clickListener);
    };
  }, []);

is a bad practice? I’m trying to do “dismiss” function for closing opened navigation.
By clicking on another navigation button I don’t want to run
doSomeSuf(). I have different function which just change data for navigation.

So can I just, do like that to prevent doSomeStuff() for another buttons?

[lasjorg]

In principle, there isn’t anything wrong with checking the event target.

But it sounds like you should be attaching the button event listener to the button and not the document. Is there a reason why you use the document to listen for a button click?

[STurbiarz]

Thanks for reply
I may not have described it very well.

When I open navigation in https://www.converse.com/shop/mens-best-sellers every click outside navigation should close it. And clicking on other links, should not close navigation but just change navigation content

[lasjorg]

Is that site just an example, or what?

The menu on that site is a drawer menu (example), and it overlays the page completely. Not sure where you would click to click outside it and the page content is behind it so keeping it open after a navigation click doesn’t seem like it would be a good user experience.