I am trying to add a modal to my page but it only stays open for a second and then closes again.

Here is my code:

Home.js

import './Home.css';
import React, {useState} from 'react';
import Modal from "./components/Modal";


function Home() {
    const [openModal, setOpenModal] = useState(false);
    return (

        <div>
            {console.log(openModal)}
            <div className="App">
                <header className="App-header">
                    <h1 className="App-name">iScore</h1>
                </header>
            </div>

            <div className="Auth-form-container">
                <form className="Auth-form">
                    <div className="Auth-form-content">
                        <h3 className="Auth-form-title">Sign In</h3>
                        <div className="form-group-both">
                            <div className="form-group mt-3">
                                <label>Email address: </label>
                                <input
                                    type="email"
                                    className="form-control mt-1"
                                    placeholder="Enter email"
                                />
                            </div>
                        </div>
                        <div className="form-group-pass">
                            <div className="form-group mt-3">
                                <label>Password: </label>
                                <input
                                    type="password"
                                    className="form-control mt-1"
                                    placeholder="Enter password"
                                />
                            </div>
                        </div>
                        <div className="popup">
                            <button className="submit"
                            >
                                Submit
                            </button>
                        </div>
                        {openModal && <Modal setOpenModals={setOpenModal}/>}
                        <p className="forgot-password text-right mt-2">
                            Forgot <a href="#">password?</a>
                        </p>
                        <p>
                            Need an account?
                        </p>
                        <button className="sign-up" onClick={() => {
                            setOpenModal(true);
                        }}>Register
                        </button>
                    </div>
                </form>
            </div>
        </div>

    );
}

export default Home;

Modal.js

import "./Modal.css";
import {useState} from "react";

function Modal({ setOpenModals }) {

    const handleChange = (event) => {
        console.log("Checked: ", event.target.checked)
        setAgreement(event.target.checked);
    }

    return(
        <div className="modalBackground">
            <div className="modalContainer">
            <article>
                <button className="Close" onClick={() => setOpenModals(false)}> &times; </button>
                    {/*<form>*/}
                        <div className="Auth-form-content">
                            <h3 className="Auth-form-title">Register</h3>
                            <div className="form-group mt-3">
                                <label>Email address: </label>
                                <input
                                    type="email"
                                    className="form-control mt-1"
                                    placeholder="Enter email"
                                />
                            </div>
                            <div className="form-group mt-3">
                                <label>Email address: </label>
                                <input
                                    type="name"
                                    className="form-control mt-1"
                                    placeholder="Enter first name"
                                />
                            </div>
                            <div className="form-group mt-3">
                                <label>Password: </label>
                                <input
                                    type="password"
                                    className="form-control mt-1"
                                    placeholder="Enter password"
                                />
                            </div>
                            <div className="form-group mt-3">
                                <label>Confirm Password: </label>
                                <input
                                    type="password"
                                    className="form-control mt-1"
                                    placeholder="Enter password again"
                                />
                            </div>
                            <div>
                                <input type="checkbox" name="terms" value="yes" onChange={handleChange}/>
                                    <label htmlFor="terms"> I agree to the terms and conditions</label>
                            </div>
                        </div>
                    {/*</form>*/}
            </article>
            <footer>
                <button disabled={!agreement} onClick={() => {handleSubmit();setOpenModals(false)}}>Register</button>
                <button onClick={() => setOpenModals(false)} >Close</button>
            </footer>
            </div>
        </div>
    )
}

export default Modal

It seems that as soon as I press Register I can see in the console that openModal is set to True, but then immediately gets set back to false.

I am at a bit of a loss as to what to changes to try and make this work. From my perspective it should be doing it correctly.

Am I missing something here?

CodePudding user response：

The issue is that in Modal.js in <button disabled={!agreement} onClick={() => {handleSubmit();setOpenModals(false)}}>Register</button> you use undeclared agreement variable that cause Modal.js throw an error and do not render. You need pass agreement as prop or add a new state const [agreement, setAgreement] = useState(false) or remove disabled={!agreement} from a button in Modal.js

CodePudding user response：

at:

<button disabled={!agreement} onClick={() => 
{handleSubmit();setOpenModals(false)}}>Register</button>

You are calling setOpenModals false right after handleSubmit() which is causing immediate close of modal.

You need to close the modal in handleSubmit() function.