title: react js render differnet component based on button click
body: <p>so i have this logic where user click a button then based on the clicked button different component get rendered I was wondering if there is a better method to implement this logic </p>
  
  <pre><code>function Test(props) {
  
      const [component, setComponent] = useState("createPatient")
      const [rendered, setRendered] = useState()
  
      function clickHandler(component) {
          switch (component) {
              case "createPatient":
                  setRendered(&lt;PatientForm/&gt;)
                  break
              case "findPatient":
                  setRendered(&lt;FindPatient/&gt;)
                  break
              case "patientsList":
                  setRendered(&lt;PatientListTable/&gt;)
  
          }
      }
  
      return (
          &lt;div&gt;
  
              &lt;button onClick={() =&gt; clickHandler("createPatient")}&gt;Create Patient&lt;/button&gt;
              &lt;button onClick={() =&gt; clickHandler("findPatient")}&gt;Find Patient&lt;/button&gt;
              &lt;button onClick={() =&gt; clickHandler("patientsList")}&gt;Patients List&lt;/button&gt;
  
  
              { rendered  }
          &lt;/div&gt;
      );
  }
  
  export default Test;
  </code></pre>