title: Close menu onClick in React
body: <p><strong>My goal:</strong> To close my Navbar when clicking on the button which is inside the Navbar.</p>
  <p>I can't seem to get it to work - If anyone can explain to me what I'm doing wrong that would be great!</p>
  <p><strong>Here's my Navbar:</strong></p>
  <pre><code>import React, { useState } from 'react';
  
  export default function Navbar() {
      const [showNav, setShowNav] = useState(true)
  
  
    return (
      &lt;div isOpen={showNav} className=&quot;w-48 bg-gray-200 h-screen py-10&quot;&gt;
          &lt;button className=&quot;bg-primary w-32 h-12 rounded-lg text-white&quot; onClick={() =&gt; setShowNav(false)}&gt;Close Navbar&lt;/button&gt;       
          &lt;h1&gt;Dashboard&lt;/h1&gt;
          &lt;h2&gt;Menu item&lt;/h2&gt;
          &lt;h2&gt;Menu item&lt;/h2&gt;
          &lt;h2&gt;Menu item&lt;/h2&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p><strong>Here is my App.js</strong></p>
  <pre><code>import './App.css';
  import Navbar from './components/Navbar';
  
  function App() {
  
    return (
      &lt;div className=&quot;flex&quot;&gt;
        &lt;Navbar /&gt;
      &lt;/div&gt;
    );
  }
  export default App;
  </code></pre>