title: Closing popup on clicking outside component
body: <p>Before wrote this post, I saw <a href="https://stackoverflow.com/questions/32553158/detect-click-outside-react-component">this post</a>, but i'm not able to link all of the code to mine. </p>
  
  <p>This is my toggle component: </p>
  
  <pre><code>&lt;ToggleContent
            toggle={show =&gt; (
              &lt;div&gt;
                &lt;button type="button" onClick={show} className={styles.acronym}&gt;
                  {acronym}
                &lt;/button&gt;
              &lt;/div&gt;
            )
            }
            content={show =&gt; (
              &lt;LogoutCard onClick={show} acronym={acronym} name={name} /&gt;
            )}
          /&gt;
  </code></pre>
  
  <p>and this is the inside of <code>ToggleContent</code></p>
  
  <pre><code>function ToggleContent({ toggle, content }) {
    const [isShown, setIsShown] = useState(false);
    const hide = () =&gt; setIsShown(false);
    const show = () =&gt; setIsShown(!isShown);
  
    return (
      &lt;Fragment&gt;
        {toggle(show)}
        {isShown &amp;&amp; content(hide)}
      &lt;/Fragment&gt;
    );
  }
  </code></pre>
  
  <p>and this is the wrapper of LogoutCard inside the props <code>content</code></p>
  
  <pre><code>import React, { useRef, useEffect } from "react";
  
  /**
   * Hook that alerts clicks outside of the passed ref
   */
  function useOutsideAlerter(ref) {
    /**
     * Alert if clicked on outside of element
     */
    function handleClickOutside(event) {
      if (ref.current &amp;&amp; !ref.current.contains(event.target)) {
        alert("You clicked outside of me!");
      }
    }
  
    useEffect(() =&gt; {
      // Bind the event listener
      document.addEventListener("mousedown", handleClickOutside);
      return () =&gt; {
        // Unbind the event listener on clean up
        document.removeEventListener("mousedown", handleClickOutside);
      };
    });
  }
  
  /**
   * Component that alerts if you click outside of it
   */
  export default function OutsideAlerter(props) {
    const wrapperRef = useRef(null);
    useOutsideAlerter(wrapperRef);
  
    return &lt;div ref={wrapperRef}&gt;{props.children}&lt;/div&gt;;
  }
  </code></pre>
  
  <p><strong><em>Problem</em></strong></p>
  
  <p>The problem is that I'm able to print the alert, but i'm not able to close the popup because I'm not able to pass the <code>show</code> value, that's in the only allowed to close and open the little popup.</p>
  
  <p><strong><em>Question</em></strong></p>
  
  <p>How can I close the popup ? </p>