title: Trying to switch between modal components using React
body: <p>So I have a start page that gives options to open a login modal or sign up modal. However, once you are in the login modal I give an option so you can switch to sign up modal. However, I can't seem to get this to work. The one time I got it to work, the modal showed up in the wrong section of the screen since it was being opened in relation to the login modal and not the start page.</p>
  <p>I am new to React so any insight would be appreciated. Should I use redux, since I can't pass props from child to parent. So that way when I return to start page I can rerender with info saying that I had clicked sign-up link on the login modal.</p>
  <pre><code>function LoginContent(props) {
  
      const [ open, setOpen ] = useState(false)
      const { show, closeModal } = props;
  
      function handleSubmit(e){
          e.preventDefault();
      }
  
      function handleSignUpButton(){
        closeModal();
        console.log(open)
        setOpen(!false)
        console.log(open)
      }
  
  
      //added so that the component doesn't get affected by parent css
      //and is being rendered from the &quot;modal-root&quot; DOM node from the index.html file
      return ReactDOM.createPortal(
        &lt;&gt;
        &lt;div className={show ? &quot;overlay&quot; : &quot;hide&quot;} onClick={closeModal} /&gt;
          &lt;div className={show ? &quot;modal&quot; : &quot;hide&quot;}&gt;
            &lt;button onClick={closeModal} id=&quot;close&quot;&gt;X&lt;/button&gt;
         
          &lt;div className=&quot;login_form&quot;&gt;
              &lt;h1&gt; Log in to Continue &lt;/h1&gt;
              &lt;form onSubmit={handleSubmit}&gt;
                  &lt;input className=&quot;username&quot; type='text' name='username' placeholder='Email Address' /&gt;
                  &lt;input className=&quot;password&quot; type='password' name='password' placeholder='password' /&gt;
                  &lt;button className=&quot;login_button&quot;&gt; Sign In&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div className=&quot;login_demo&quot;&gt;
              &lt;h3 className=&quot;login_demo_pointer&quot; type=&quot;submit&quot;&gt;Demo Login&lt;/h3&gt;
              &lt;/div&gt;
          &lt;hr /&gt;
          &lt;div className=&quot;login_switch&quot;&gt;Don't have an account. 
          &lt;button className=&quot;signup_link&quot; onClick={handleSignUpButton}&gt;Sign Up&lt;/button&gt;
          {open &amp;&amp; &lt;SignUpContent open={open} closeModal={closeModal} show={show} /&gt;} &lt;/div&gt;
          &lt;/div&gt;
        &lt;/&gt;, document.getElementById(&quot;modal-root&quot;)
      );
  }
  </code></pre>
  <pre><code>function Start() {
      const history = useHistory();
  
      const [showLogin, setLogin ] = useState(false);
      const openModalLogin = () =&gt; setLogin(true);
      const closeModalLogin = () =&gt; setLogin(false);
  
      const [showSignUp, setShow ] = useState(false);
      const openModalSignUp = () =&gt; setShow(true);
      const closeModalSignUp = () =&gt; setShow(false);
  
  
      return (
          
          &lt;div className=&quot;bodyStart&quot;&gt;
              &lt;img src=&quot;https://i.imgur.com/5gjRSmB.gif&quot; alt=&quot;&quot; id=&quot;bg&quot; /&gt;
              &lt;div className=&quot;start_logo&quot;&gt;
                  &lt;img src={require(&quot;../styling/logo.png&quot;)} alt=&quot;&quot; onClick={() =&gt; {
                  history.push('/home')
                  history.go(0)}} className=&quot;logo&quot; /&gt;
              &lt;/div&gt;
          &lt;div className=&quot;start&quot;&gt;
              
          &lt;div className=&quot;start_heading&quot;&gt;
              &lt;h2&gt;Mother Nature is Calling.&lt;/h2&gt;
              &lt;h4&gt;Find a place to recharge and escape the day to day.&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div className=&quot;start_location&quot;&gt;
          &lt;p&gt;Where?&lt;/p&gt;
          &lt;div className=&quot;start_input&quot;&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;anywhere&quot; /&gt;
          
              &lt;ArrowForwardIcon onClick={() =&gt; {
                  history.push('/search')
                  history.go(0)}}
              className=&quot;arrow&quot; fontSize=&quot;large&quot;/&gt;  
          
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;start_authentication&quot;&gt;
          &lt;Button className=&quot;login&quot; 
              variant=&quot;contained&quot; 
              color=&quot;primary&quot; 
              size=&quot;large&quot;
              onClick={() =&gt; openModalLogin()}&gt; Login &lt;/Button&gt;
              {showLogin &amp;&amp; &lt;LoginContent closeModal={closeModalLogin} show={showLogin} /&gt;}
  
          &lt;Button className=&quot;signup&quot; 
              variant=&quot;contained&quot; 
              size=&quot;large&quot;
              onClick={()=&gt; openModalSignUp()}&gt; Sign-Up &lt;/Button&gt;
              {showSignUp &amp;&amp; &lt;SignUpContent closeModal={closeModalSignUp} show={showSignUp} /&gt;}
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          
      )
  }
  
  </code></pre>