title: Change component state from another component
body: <p>I am trying to do the same sidebar in NextJS <a href="https://codepen.io/chris__sev/pen/RwKWXpJ" rel="nofollow noreferrer">original sidebar</a>. For that I created two components:</p>
  <p>component for menu button:</p>
  <pre><code>export default function MobileMenuBtn() {
  
  return (
      &lt;div className=&quot;bg-gray-800 text-gray-100 flex justify-between md:hidden&quot;&gt;
          &lt;div className=&quot;block p-4 text-white font-bold&quot;&gt;Better Dev&lt;/div&gt;
          &lt;button onClick={()=&gt;???????????} className=&quot;mobile-menu-button p-4 focus:outline-none focus:bg-gray-700&quot;&gt;
          &lt;svg className=&quot;h-5 w-5&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot;&gt;
          &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M4 6h16M4 12h16M4 18h16&quot; /&gt;
          &lt;/svg&gt;
          &lt;/button&gt;
          
      &lt;/div&gt;
  )
  </code></pre>
  <p>}</p>
  <p>and component for sidebar itself:</p>
  <pre><code>export default function Sidebar() {
  return (
      &lt;div className=&quot;sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 
      transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out&quot;&gt;
          &lt;div className=&quot;block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white&quot;&gt;
              Verb To Be
          &lt;/div&gt;
          
      &lt;/div&gt;
  )
  </code></pre>
  <p>}</p>
  <p>To show/hide sidebar when I click menu button I was trying to use useState but the problem is I don't know how to change the state of <strong>Sidebar</strong> component from <strong>MobileMenuBtn</strong>.</p>