title: Toggle(show/hide) components onClick in single page React component useState
body: <p>How do you toggle between components in the single page case below? Ideally, when you click the <code>menu-item</code> the associated component will show and the others will hide.</p>
  
  <p><strong>React</strong></p>
  
  <pre><code>import React, { useState } from 'react';
  import About from "./components/About";
  import Projects from "./components/Projects";
  import Contact from "./components/Contact";
  
  const App = () =&gt; {
      // Toggle state(s) here?
  
      // Toggle function(s) here?
  
      return (
          &lt;div className="nav"&gt;
              &lt;ul className="menu"&gt;
                  &lt;li className="menu-item"&gt;About&lt;/li&gt;
                  &lt;li className="menu-item"&gt;Projects&lt;/li&gt;
                  &lt;li className="menu-item"&gt;Contact&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div className="container"&gt;
              &lt;About /&gt;
              &lt;Projects /&gt;
              &lt;Contact /&gt;
          &lt;/div&gt;
      )
  };
  
  export default App;
  </code></pre>