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