How to use multiple material ui dialog with React?

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.

I wrote open state on App.js. but the trouble is when it’s written in App.js, two of modal open..

Does anyone know how to settle it?

App.js

  const App = () => {

    const [open, setOpen] = useState(false);
    
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };


    return (
      <div>
        <Top handleClickOpen={handleClickOpen}/>
        <SignupModal open={open} handleClose={handleClose} />
        <LoginModal open={open} handleClose={handleClose} />
      </div>
    )

Top.js

const Top = (props) => {
    const classes = useStyles();

    return (
        <React.Fragment>
            <div style={style}>
            <Button variant="outlined" className={classes.loginButton} onClick={props.handleClickOpen}>
              Login
            </Button>
            </div>
            <h1>Toppage</h1>
        </React.Fragment>
    );
}

SignupModal.js

const SignupModal = (props) => {
  return (
    <div>
      <Dialog
        open={props.open}
        onClose={props.handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title"　className={classes.title}>Sign up</DialogTitle>
        <DialogContent className={classes.content}>
            <div className={classes.text}> 
                <TextField id="standard-basic" label=“name” fullWidth/>
                <TextField id="standard-basic" label=“email” fullWidth/>
                <TextField id="standard-basic" label=“password” fullWidth/>
                <TextField id="standard-basic" label=“pass”word fullWidth/>
            </div>
        </DialogContent>
        <p className={classes.toLogin}>to Login</p>
        <DialogActions>
          <Button onClick={props.handleClose} className={classes.signUpButton}>
            Send
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

LoginModal.ls

const LoginModal = (props) => {
  return (
    <div>
      <Dialog
        open={props.open}
        onClose={props.handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title"　className={classes.title}>Login</DialogTitle>
        <DialogContent className={classes.content}>
            <div className={classes.text}> 
                <TextField id="standard-basic" label=“name” fullWidth/>
                <TextField id="standard-basic" label=“pass”word fullWidth}/>
            </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={props.handleClose} className={classes.signUpButton}>
            Login
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}
export default LoginModal

Answer

You are sharing the state on both of your modals that’s why.

The solution is simple, have 2 states; one that will determine if SignupModal is opened or not and another one for LoginModal.

const App = () => {
  const [openLogin, setOpenLogin] = useState(false);
  const [openSignup, setOpenSignup] = useState(false);

  return (
    <div>
      <Top
        onClickLogin={() => setOpenLogin(true)}
        onClickSignup={() => setOpenSignup(true)}
      />
      <SignupModal open={openLogin} handleClose={() => setOpenLogin(false)} />
      <LoginModal open={openSignup} handleClose={() => setOpenSignup(false)} />
    </div>
  );
};

const Top = (props) => {
  return (
    <React.Fragment>
      <div>
        <Button
          variant="outlined"
          className={classes.loginButton}
          onClick={props.onClickLogin}
        >
          Login
        </Button>
        <Button
          variant="outlined"
          className={classes.loginButton}
          onClick={props.onClickSignup}
        >
          Signup
        </Button>
      </div>
      <h1>Toppage</h1>
    </React.Fragment>
  );
};

Advertisement

Answer