title: Conditional render 1 of 3 components on button click (react)
body: <p>I'm new to react and been struggling to figure out how to render the components inside the container depending on which button has been clicked.</p>
  <p>I've set the state to false, then on the button click set it to true then used a ternary operator to show or set the component to null but won't work when the next button is clicked because the state is already set to true.</p>
  <p>any help in the right direction would be appreciated :)</p>
  <pre><code>const AboutUs = () =&gt; {
  
    const [VisDetails, setVisDetails] = useState(false);
  
    return (
  
  &lt;Button&gt;Personal Details&lt;/Button&gt;
  &lt;Button&gt;Bio&lt;/Button&gt;
  &lt;Button&gt;Qualifications&lt;/Button&gt;
  
  Container className={classes.container}&gt;
  
  &lt;PersonalDetails /&gt;
  &lt;ProfileBio /&gt;
  &lt;ProfileQualifications /&gt;
  
  &lt;/Container&gt;
  
    );
  };
  </code></pre>