title: How to use multiple material ui dialog with React?
body: <p>I want to use two dialog in sign up page and login page.
  the implement that I want to do are signup screen showing up when click to sign up button on the Top page, and login screen showing up when click to login Button on signup page.</p>
  <p>I wrote open state on App.js.
  but the trouble is when it's written in App.js,  two of modal open..</p>
  <p>Does anyone know how to settle it?</p>
  <p>App.js</p>
  <pre><code>  const App = () =&gt; {
  
      const [open, setOpen] = useState(false);
      
      const handleClickOpen = () =&gt; {
        setOpen(true);
      };
    
      const handleClose = () =&gt; {
        setOpen(false);
      };
  
  
      return (
        &lt;div&gt;
          &lt;Top handleClickOpen={handleClickOpen}/&gt;
          &lt;SignupModal open={open} handleClose={handleClose} /&gt;
          &lt;LoginModal open={open} handleClose={handleClose} /&gt;
        &lt;/div&gt;
      )
  </code></pre>
  <p>Top.js</p>
  <pre><code>const Top = (props) =&gt; {
      const classes = useStyles();
  
      return (
          &lt;React.Fragment&gt;
              &lt;div style={style}&gt;
              &lt;Button variant=&quot;outlined&quot; className={classes.loginButton} onClick={props.handleClickOpen}&gt;
                Login
              &lt;/Button&gt;
              &lt;/div&gt;
              &lt;h1&gt;Toppage&lt;/h1&gt;
          &lt;/React.Fragment&gt;
      );
  }
  
  </code></pre>
  <p>SignupModal.js</p>
  <pre><code>const SignupModal = (props) =&gt; {
    return (
      &lt;div&gt;
        &lt;Dialog
          open={props.open}
          onClose={props.handleClose}
          aria-labelledby=&quot;alert-dialog-title&quot;
          aria-describedby=&quot;alert-dialog-description&quot;
        &gt;
          &lt;DialogTitle id=&quot;alert-dialog-title&quot;　className={classes.title}&gt;Sign up&lt;/DialogTitle&gt;
          &lt;DialogContent className={classes.content}&gt;
              &lt;div className={classes.text}&gt; 
                  &lt;TextField id=&quot;standard-basic&quot; label=“name” fullWidth/&gt;
                  &lt;TextField id=&quot;standard-basic&quot; label=“email” fullWidth/&gt;
                  &lt;TextField id=&quot;standard-basic&quot; label=“password” fullWidth/&gt;
                  &lt;TextField id=&quot;standard-basic&quot; label=“pass”word fullWidth/&gt;
              &lt;/div&gt;
          &lt;/DialogContent&gt;
          &lt;p className={classes.toLogin}&gt;to Login&lt;/p&gt;
          &lt;DialogActions&gt;
            &lt;Button onClick={props.handleClose} className={classes.signUpButton}&gt;
              Send
            &lt;/Button&gt;
          &lt;/DialogActions&gt;
        &lt;/Dialog&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>LoginModal.ls</p>
  <pre><code>const LoginModal = (props) =&gt; {
    return (
      &lt;div&gt;
        &lt;Dialog
          open={props.open}
          onClose={props.handleClose}
          aria-labelledby=&quot;alert-dialog-title&quot;
          aria-describedby=&quot;alert-dialog-description&quot;
        &gt;
          &lt;DialogTitle id=&quot;alert-dialog-title&quot;　className={classes.title}&gt;Login&lt;/DialogTitle&gt;
          &lt;DialogContent className={classes.content}&gt;
              &lt;div className={classes.text}&gt; 
                  &lt;TextField id=&quot;standard-basic&quot; label=“name” fullWidth/&gt;
                  &lt;TextField id=&quot;standard-basic&quot; label=“pass”word fullWidth}/&gt;
              &lt;/div&gt;
          &lt;/DialogContent&gt;
          &lt;DialogActions&gt;
            &lt;Button onClick={props.handleClose} className={classes.signUpButton}&gt;
              Login
            &lt;/Button&gt;
          &lt;/DialogActions&gt;
        &lt;/Dialog&gt;
      &lt;/div&gt;
    );
  }
  export default LoginModal
  
  
  </code></pre>