Как при клике на один элемент скрывать другой?

Question

[asdasdqwe]

Написал маленький dropdown
https://codesandbox.io/s/funny-https-xj2xk?file=/s...

Все работает, но как при клике на один dropdown (а это компонент), скрывать другой dropdown?

Answer 1

[Александр Шипин]

Быть может подобное решение вам поможет.
https://blog.logrocket.com/building-a-custom-dropd...

Либо:
https://stackoverflow.com/questions/54549294/react...

Answer 2

[0xD34F]

const el = useRef();

useEffect(() => {
  const onClick = e => {
    const dropdown = e.target.closest('.dropdown');
    if (dropdown && dropdown !== el.current) {
      setIsVisible(false);
    }
  };

  document.addEventListener('click', onClick);

  return () => {
    document.removeEventListener('click', onClick);
  };
}, []);

<div className="dropdown" ref={el}>

Comments

[asdasdqwe]

Если dropdown-ов 15 - то document получит 15 eventListener. Но как вариант