title: show / hide component based on if else statement in react
body: <p>I have some code that looks like this</p>
  <pre><code>const Movies = () =&gt; {
    const [show, setShow] = useState(false);
    const [show1, setShow1] = useState(false);
    const onClick = () =&gt; setShow(!show);
    const onClick1 = () =&gt; setShow1(!show1);
  
    return (
      &lt;div className=&quot;movie&quot;&gt;
        &lt;Header /&gt;
        &lt;h2&gt;Discover a new movie!&lt;/h2&gt;
        &lt;div className=&quot;showBtns&quot;&gt;
          &lt;button onClick={onClick} className=&quot;right&quot;&gt;Search &lt;FaSearch /&gt;&lt;/button&gt; 
          &lt;button onClick={onClick1}&gt;Discover &lt;FaSearch /&gt;&lt;/button&gt;
        &lt;/div&gt;
        {show1 ? &lt;DropDown /&gt; : null } 
        {show ? &lt;MovieSearch /&gt; : null } 
        &lt;Nav /&gt;
      &lt;/div&gt;
    );
  };
  
  </code></pre>
  <p>as of right now if I click on the button for either one it will show the corresponding component but if both are clicked they both show up.</p>
  <p>I'd like to write an if else statement to check if one is showing then the other should not be shown.</p>
  <p>I've tried a few different things and can't seem to get it to work.</p>
  <p>any feedback on a better way to do this or how to get it to work would be appreciated.</p>
  <pre><code>if(show === true){
      setShow1(false)
    } else if(show1 === true) {
      setShow(false)
    }
  </code></pre>
  <p>this gives an error of Too many re-renders. React limits the number of renders to prevent an infinite loop.</p>