How to use multiple material ui dialog with React?

Question

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

Beware that stacking these dialogs/modals is generally not a good practice in terms of UI/UX; it is preferable to have at most one visible dialog at any given time. — 6infinity8
– 6infinity8, Commented Dec 29, 2022 at 18:15

bertdida · Accepted Answer · 2020-09-12 09:56:32Z

9

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>
  );
};

answered Sep 12, 2020 at 9:56

bertdida

5,3282 gold badges19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

via Over a year ago

bertdia, Thanks!! it works!! I knew they should have difference state but I didnt know exaclly how to do it. now I understood. Thanks a lot :)

bertdida Over a year ago

You're welcome @kann. It seems that you are new on React, keep learning! :)

Collectives™ on Stack Overflow

How to use multiple material ui dialog with React?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related