CODEWITHSUNDEEP
reactjsif-statementreact-hooks
joechamberlain1989
joechamberlain1989

Reputation: 13

OnClick function which closes one modal and opens another

*** ANSWER DOWN BELOW***

I need help with a bunch of things. I need to close one modal {body} with an onclick function which will then open a new modal {bodytwo}. Eventually this will lead to seamless opening and closing, back and forth. What's happening at the moment is that {body} is still open when I use my current onClick function which is to open {bodyTwo}. I thought I was close but I'm completely stuck. I'm relatively new to React so any tips or nudges in the right direction would be greatly appreciated!

Thanks

function FormModal() {

    const classes = useStyles()

    const [login, setLogin] = useState(false);

    const handleClose = () => {
        setLogin(false)
    }

    const [signUp, setSignUp] = useState(false);

    const handleSignUpClose = () => {
        setSignUp(false)
    }

    const body = (
        <div>
                <Link onClick ={()=> setSignUp(true) && setLogin}
                onClose={handleClose}>
                SIGN UP</Link>
                
               
            </div>
    );

    const bodyTwo = (
        <div className="Form">
            <SignUp />
        </div>
    );

    return (
        <>
        <div>
        <Link onClick ={()=> setSignUp(!signUp)}>
        <i className="fa fa-user-circle" /> {signUp? 'Function': 'Register'} 
        </Link>

            {signUp? (
                <Modal open ={signUp} 
                onClose={handleSignUpClose} 
                className={classes.modal}
                onEscapeKeyDown={handleSignUpClose}>
                    {bodyTwo}
                </Modal>
            ) : (
                <Modal close = {signUp}></Modal>
            )}
        
        </div>
        <div>
        <Link onClick ={()=> setLogin(!login)}>
        {"|"}{login? 'Log Out': 'Log In'}
        </Link>

            {login? (
                <Modal open ={login} 
                onClose={handleClose} 
                className={classes.modal}
                onEscapeKeyDown={handleClose}>
                    {body}
                </Modal>
            ) : (
                ''
            )}
        </div>
        </>
    )
}

export default FormModal;

Upvotes: 0

Views: 755

Answers (2)

joechamberlain1989
joechamberlain1989

Reputation: 13

So I figured it out and I'm starting to think I have a bit of a problem with trying to over think things.

All I needrf to do was add another function which opened one and closed the other at the same time. Add this to the onClick function in the body and voila, no more stacking modals!

const OpenLogCloseSign=()=>{
    setLogin(true);
    setSignup(false);
    //closes signup and opens login, used for internal links
}

Upvotes: 0

Akshay PandherPatte
Akshay PandherPatte

Reputation: 173

create a single function for closing and opening modal and mutate the value in that single function.

Upvotes: 1

Related Questions