CODEWITHSUNDEEP
reactjsbuttonmodal-dialog
samsino
samsino

Reputation: 17

button onclick refresh page instead of set state to false

I am developing an ecommerce application and I am working on the login.

I want the login to be a pop up box such that when the user click on login button the dialog box will appear and when the user click on the x button the dialog box disappears.

Other things work well except the close(x) button.

When it is clicked it refreshes the page instead of setting setOpenLoginModal to false.

I created a reusable modal then imported it to LoginModal.js which is passed to App.js.

Modal.js

const Modal = ({open, children, handleSubmit}) => {
        if(!open) return null
        return ReactDom.createPortal(
            <>
            <form action="" onSubmit={handleSubmit}>
                <div style={OVERLAY_STYLE}>
                    <div style={MODAL_STYLES}>
                        {children}
                    </div> 
                </div>
            </form>
            </>,
            document.getElementById('portal')
        )
    }
    
    export default Modal

LoginModal.js

import Modal from './Modal'
const LoginModal = ({openLoginModal, setOpenLoginModal}) => {
    return (
        <div>
            <Modal open={openLoginModal} handleSubmit={handleSubmit}>
                        
            <div className="d-flex justify-content-center">
                <div>
                    <h4 className="head">eTranzact eCommerce</h4>
                    <h6 className="sub-heading">Create an account to list your own product</h6>
                </div>
                <div>
                    <h2 style={{position: 'absolute', right: '2em'}}>
                    <button className="close" type="button" onClick={() => setOpenLoginModal(false)}>x</button>
                    </h2>
                </div>
            </div>
            <hr />

        </div>
    )
    }

     export default LoginModal

App.js

import LoginModal from '../Components/LoginModal';
    const App = () => {
    const [openLoginModal, setOpenLoginModal] = useState(false)     
    return (
        <div>
            {
              openLoginModal && (
                    <LoginModal openLoginModal={openLoginModal} setOpenRegisterModal={ () => setOpenRegisterModal(false) }  />
                )
            }
             <div className="right-navs">
                 <button onClick={() => setOpenLoginModal(true)} className="btn btn-primary">
                            LOGIN
                  </button>
            </div>
        </div>
    )
}


export default App

Upvotes: 1

Views: 392

Answers (2)

Richard Hpa
Richard Hpa

Reputation: 2857

This issue is probably with your form, I don't think you are preventing the default. Even though you are saying action="" it will still try and process it like a get action which would be causing it to refresh the page.

const Modal = ({ open, children, handleSubmit }) => {
    if (!open) return null

    const submit = (e) => {
        e.preventDefault()
        handleSubmit()
    }
    return ReactDom.createPortal(
        <>
            <form action="" onSubmit={submit}>
                <div style={OVERLAY_STYLE}>
                    <div style={MODAL_STYLES}>{children}</div>
                </div>
            </form>
        </>,
        document.getElementById('portal')
    )
}

export default Modal

Upvotes: 1

unhackit
unhackit

Reputation: 561

I can see you're passing the wrong setState handler to the child component. You have to change setOpenRegisterModal to setOpenLoginModal in your App.js file

Upvotes: 0

Related Questions