title: Conditionally render a react comp using switch case
body: <p>I have the following code just to simulate my problem. I would like to conditionally render a component on button click. Here is the code that I have, how do I render the component conditionally using a function and a switch case. Remember I am using only functional components and not class components.</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  
  import One from "./One";
  import Two from "./Two";
  import Three from "./Three";
  import None from "./None";
  
  import "./styles.css";
  const handleRender = (e, props) =&gt; {
    let exp = Math.floor(Math.random() * props);
    console.log(exp);
    return exp;
  };
  function Test(exp) {
    switch (exp) {
      case 1:
        return &lt;One /&gt;;
      case 2:
        return &lt;Two /&gt;;
      case 3:
        return &lt;Three /&gt;;
      default:
        return &lt;None /&gt;;
    }
  }
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        &lt;button onClick={(e, p) =&gt; handleRender("a", "5")}&gt;
          Render One Two or Three
        &lt;/button&gt;
        &lt;Test /&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/clever-merkle-ln8wf" rel="nofollow noreferrer">https://codesandbox.io/s/clever-merkle-ln8wf</a></p>