title: How to show one component and hide others using useState and useEffect?
body: <p>I want to make a component in the front page that displays list of vehicles with navigation buttons that shows list of the selected button.</p>
  <p>Is there a better way I could write this code below because I want the list of categories to be much longer? Or are there other methods I can use other than <code>useState</code> &amp; <code>useEffect</code>? I'm using Next.js</p>
  <pre><code>const Vehicles = () =&gt; {
  
    const [selectedCategory, setSelectedCategory] = useState(&quot;cars&quot;)
  
    const [cars, setCars] = useState(true)
    const [bikes, setBikes] = useState(false)
    const [motorcycles, setMotorcyles] = useState(false)
    const [scooters, setScooters] = useState(false)
  
    useEffect(() =&gt; {
      if (selectedCategory === &quot;cars&quot;) {
        setCars(true)
        setBikes(false)
        setMotorcyles(false)
        setScooter(false)
      }
      if (selectedCategory === &quot;bikes&quot;) {
        setBikes(true)
        setCars(false)
        setMotorcyles(false)
        setScooters(false)
      }
      if (selectedCategory === &quot;motorcycles&quot;) {
        setMotorcyles(true)
        setCars(false)
        setBikes(false)
        setScooters(false)
      }
      if (selectedCategory === &quot;scooters&quot;) {
        setScooters(true)
        setCars(false)
        setBikes(false)
        setMotorcyles(false)
      }
    }, [selectedCategory])
    
    return (
      &lt;div&gt;
        &lt;div&gt;
          &lt;button onClick={() =&gt; setSelectedCategory(&quot;cars&quot;)}&gt; Cars &lt;/button&gt;
          &lt;button onClick={() =&gt; setSelectedCategory(&quot;bikes&quot;)}&gt; Bikes &lt;/button&gt;
          &lt;button onClick={() =&gt; setSelectedCategory(&quot;motorcycles&quot;)}&gt; Motorcycles &lt;/button&gt;
          &lt;button onClick={() =&gt; setSelectedCategory(&quot;scooters&quot;)}&gt; Scooters &lt;/button&gt;
        &lt;/div&gt;
  
        {cars &amp;&amp; (
          &lt;div&gt;
            &lt;Cars /&gt;
          &lt;/div&gt;
        )}
  
        {bikes &amp;&amp; (
          &lt;div&gt;
            &lt;Bikes /&gt;
          &lt;/div&gt;
        )}
  
        {motorcycles &amp;&amp; (
          &lt;div&gt;
            &lt;Motorcycles /&gt;
          &lt;/div&gt;
        )}
  
        {scooters &amp;&amp; (
          &lt;div&gt;
            &lt;Scooters /&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default Vehicles;
  </code></pre>