title: React - show/hide element on click
body: <p>I am using React hooks, I have 2 components:</p>
  <ol>
  <li>Curtain</li>
  <li>Navbar</li>
  </ol>
  <p>Here is my code for the <code>Curtain</code> component:</p>
  <pre class="lang-js prettyprint-override"><code>    function Curtain(){
  
      return(
          &lt;div className=&quot;curtain__div&quot;&gt;
              &lt;ul className=&quot;menu__items&quot;&gt;
                  &lt;li className=&quot;about&quot;&gt;abc&lt;/li&gt;
                  &lt;li&gt;def&lt;/li&gt;
                  &lt;li&gt;ghi&lt;/li&gt;
                  &lt;li&gt;klm&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      );
  }
  
  export default Curtain;
  </code></pre>
  <p>Here is my code for the <code>NavBar</code> component:</p>
  <pre class="lang-js prettyprint-override"><code>    function NavBar(){
  
      const [show, setShow] = useState(false);
  
  
      return(
          &lt;nav className=&quot;nav__bar&quot;&gt;
             
              &lt;ul className=&quot;menu&quot;&gt;
                 &lt;li className=&quot;menu__icon&quot; onClick={() =&gt; setShow(true)}&gt;&lt;box-icon name='menu' color=&quot;floralwhite&quot; size=&quot;md&quot;/&gt;
                 &lt;Curtain/&gt;
               &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      );
  
  }
  
  
  export default NavBar;
  </code></pre>
  <p>My Question:
  I want to show the <code>Curtain</code> component, when the user click on the li which is of <code>className=&quot;menu__icon&quot;</code>, and to be hidden when the user clicks on it again.</p>