title: How to create an overlay with React?
body: <p>I'm trying to make an overlay that will appear when I clicked the menu button and close when clicked anywhere on the page. But nothing is happening when I clicked the button.</p>
  
  <p>I'm still new to React Hooks, so I hope you'll understand if I make obvious mistakes.</p>
  
  <p>Here are my codes:</p>
  
  <p>App.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import ReactDOM from "react-dom";
  
  import "./styles.css";
  
  const modalRoot = document.getElementById("modal-root");
  
  const Modal = props =&gt; {
    return ReactDOM.createPortal(
      &lt;div className="overlay"&gt;{props.children}&lt;/div&gt;,
      modalRoot
    );
  };
  
  export default function App() {
    const [open, setOpen] = React.useState(false);
    return (
      &lt;div className="App"&gt;
        &lt;button onClick={() =&gt; setOpen(!open)}&gt;Menu&lt;/button&gt;
        {open &amp;&amp; &lt;Modal in={open}&gt;Click anywhere to close&lt;/Modal&gt;}
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  
  <p>App.css</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
    font-family: sans-serif;
  }
  
  .App {
    position: relative;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  
  </code></pre>
  
  <p>Here's a link to <a href="https://codesandbox.io/s/sidebar-sample-example-y69i1?file=/src/styles.css:0-309" rel="nofollow noreferrer">CodeSandbox</a></p>