title: Next.js toggle display of a div tag
body: <h1>Code</h1>
  
  <pre><code>export default function Header(){
    let showMe = false;
    function toggle(){
      showMe = !showMe;
    }
    return (
      &lt;&gt;
        &lt;button onClick={toggle}&gt;Toggle Subjects&lt;/button&gt;
        {/*The bottom code should toggle on and off when the button is pressed*/}
        &lt;div style={{
          display: showMe?"block":"none"
        }}&gt;
          This should toggle my display
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <hr>
  
  <h1>Expectation</h1>
  
  <p>The <code>div</code> tag should toggle in visibility (For example, if I clicked on the button once, the div tag should show up, and if I clicked on it again it would be hidden and so on).</p>
  
  <hr>
  
  <h1>Reality</h1>
  
  <p>It appears the variable <code>showMe</code> changes however the <code>div</code> tag does not follow with the updates and remains hidden.</p>
  
  <p><strong>NOTE: I am using next.js if that changes anything.</strong></p>