title: React State Hook - toggle a class
body: <p>I'm trying to build a sidebar navigation menu and thought I'd take advantage of the new State hook in React. I've read the docs but can't seem to find an example similar to what I need, which is quite simply to toggle a CSS class on click which will in turn open and close my menu.</p>
  
  <p>Here's what I've tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const SidebarMenuItem = ({ component }) =&gt; {
    const [ menuActive, setMenuState ] = useState(false);
  
    return (
      &lt;li className="p-sidebar-menu-item"&gt;
        menuActive:
        { menuActive }
        &lt;button className="p-sidebar-menu-item__link" onClick={() =&gt; setMenuState(!menuActive)}&gt;{ component.component }&lt;/button&gt;
        { component.children &amp;&amp; (
          &lt;ul className="p-sidebar-menu"&gt;
            &lt;li&gt;&lt;a href={`/${component.slug}`}&gt;Overview&lt;/a&gt;&lt;/li&gt;
            { component.children.map((subPage, key) =&gt; (
              &lt;li key={ key }&gt;
                &lt;a href={`/${subPage.slug}`}&gt;{ subPage.name }&lt;/a&gt;
              &lt;/li&gt;
            ))}
          &lt;/ul&gt;
        )}
      &lt;/li&gt;
    )
  }
  
  export default SidebarMenuItem;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas where I'm going wrong?</p>
  
  <p>Thanks</p>