title: How can I use the useState function as a toggle method?
body: <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import './Menu.css'
  
  
  export default function Menu() {
  
  const [classes, setClasses] = useState('container')
      return (
          &lt;div&gt;
              &lt;p&gt;Click on the Menu Icon to transform it to &quot;X&quot;:&lt;/p&gt;
              &lt;div className={classes} onClick={() =&gt; setClasses(&quot;container change&quot;)}&gt;
              &lt;div className=&quot;bar1&quot;&gt;&lt;/div&gt;
              &lt;div className=&quot;bar2&quot;&gt;&lt;/div&gt;
              &lt;div className=&quot;bar3&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>It works now because of one of the given solutions, but when I click on the icon again, it doesn't go back to the original state. How can I fix that?</p>
  <p>I got this menu example from here: <a href="https://www.w3schools.com/howto/howto_css_menu_icon.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_css_menu_icon.asp</a></p>