title: React switching between components or hiding and transitions
body: <p>I am trying to set up the general page rendering of an app and need help/advice as a newbie. The code below allows me to include components base on a state I can change by clicking on a button. I am not sure if this is the best way to do this but when I click on my buttons they include the components needed.</p>
  <p>Now when I click on them the other pages just disappear and show up without any transition. How would I fade out a little slower or transition better to the next component?</p>
  <p>My app.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  //Adding Components
  import Home from &quot;./Components/Home&quot;;
  import Game from &quot;./Components/Game&quot;;
  import Myp from &quot;./Components/Myp&quot;;
  import Tutorial from &quot;./Components/Tutorial&quot;;
  //Import Styles
  import &quot;./styles/app.scss&quot;;
  
  function App() {
    const [pageStatus, setPageStatus] = useState(0);
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;section&gt;
          {(() =&gt; {
            switch (pageStatus) {
              case 1:
                return (
                  &lt;Game pageStatus={pageStatus} setPageStatus={setPageStatus} /&gt;
                );
              case 2:
                return (
                  &lt;Tutorial
                    pageStatus={pageStatus}
                    setPageStatus={setPageStatus}
                  /&gt;
                );
              case 3:
                return (
                  &lt;Myp pageStatus={pageStatus} setPageStatus={setPageStatus} /&gt;
                );
              default:
                return (
                  &lt;Home pageStatus={pageStatus} setPageStatus={setPageStatus} /&gt;
                );
            }
          })()}
        &lt;/section&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>My Home.js</p>
  <pre><code>import React from &quot;react&quot;;
  //Import Images or Logos
  import logo from &quot;../icons/EduLogo.ico&quot;;
  
  const Home = ({ setPageStatus, pageStatus }) =&gt; {
    return (
      &lt;div className=&quot;home&quot;&gt;
          &lt;div className=&quot;head&quot;&gt;
            &lt;h1&gt;EduMemory&lt;/h1&gt;
            &lt;img alt=&quot;EduMemory logo&quot; src={logo}&gt;&lt;/img&gt;
          &lt;/div&gt;
          &lt;button onClick={() =&gt; setPageStatus(1)}&gt;Play&lt;/button&gt;
          &lt;button onClick={() =&gt; setPageStatus(2)}&gt;How To Play&lt;/button&gt;
          &lt;button onClick={() =&gt; setPageStatus(3)}&gt;Tom's MYP&lt;/button&gt;
        &lt;/div&gt;
    );
  };
  
  export default Home;
  </code></pre>