React Close Modal After Submit or After 5 Second

React is used to create a modal dialog that can display a form, a confirmation message, or any other content requiring user interaction. However, a modal dialog should be easy to close upon clicking the submit button, either by clicking a button, pressing a key, or clicking outside the modal area. In this article, we will learn how to create a reusable modal component in React that can handle these scenarios, as well as how to clear the modal data on close to prevent unwanted state changes

written

reviewed

updated

How to Close Modal After Submit in React Js?

To close a modal after a form submission in React.js, follow these steps. First, set up a state variable, such as 'showModal,' to control the visibility of the modal. Initially, set it to true to display the modal. When the form is submitted, update the state variable to false. This action triggers a re-render, hiding the modal. To achieve this, add an onSubmit event handler to the form and call a function that updates the state variable. Additionally, clear modal data after submitting the form.

React Js Close Modal after form submit Example

<script type="text/babel">
        const { useState } = React;
        function App() {
            const [showModal, setShowModal] = useState(false);

            const toggleModal = () => {
                setShowModal(!showModal);
            };

            const submitForm = (e) => {
                e.preventDefault();
                // Perform form submission logic here

                // Close the modal after form submission
                toggleModal();
            };

            return (
                <div className='container'>
                    <h3>React Js Close Modal after form submit</h3>
                    <button onClick={toggleModal}>Open Modal</button>

                    {showModal && (
                        <div className="modal">
                            <div className="modal-content">
                                <button className="close-x" onClick={toggleModal}>X</button>
                                <form onSubmit={submitForm}>
                                    <h3>React Js Close Modal after form submit</h3>
                                    {/* Form fields here */}
                                    <button type="submit">Submit</button>
                                </form>
                            </div>
                        </div>
                    )}
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById('app'));
    </script>

Run

Output of React Js Close Modal after form submit

How to Close Modal After 5 Seconds in React Js?

React modals are pop-up windows that display information or forms to the user. Modals can be useful for confirming actions, showing alerts, or collecting data. However, sometimes we may want to close the modal automatically after a certain amount of time, for example, 5 seconds, or clear the modal data after the user submits the form. In this article, we will learn how to implement these functionalities using React, specifically, how to close the modal after 5 seconds the form is submitted by clicking a button.

React Close Modal After 5 Seconds

 <script type="text/babel">
        const { useState } = React;
        function App() {
            const [showModal, setShowModal] = useState(false);

            const toggleModal = () => {
                setShowModal(!showModal);
            };

            const submitForm = (e) => {
               e.preventDefault();
                // Perform form submission logic here

                // Display a message
                const message = document.createElement('p');
                message.textContent = 'Form submitted! Closing in 5 seconds.';
                document.querySelector('.modal-content').appendChild(message);

                // Close the modal after form submission with a delay of 5000 milliseconds (5 seconds)
                setTimeout(() => {
                    // Remove the message
                    document.querySelector('.modal-content').removeChild(message);
                    // Close the modal
                    toggleModal();
                }, 5000);
            };

            return (
                <div className='container'>
                    <h3>React Close Modal After 5 Seconds After Submit</h3>
                    <button onClick={toggleModal}>Open Modal</button>

                    {showModal && (
                        <div className="modal">
                            <div className="modal-content">
                                <button className="close-x" onClick={toggleModal}>X</button>
                                <form onSubmit={submitForm}>
                                    <h3>React Js Close Modal after form submit</h3>
                                    {/* Form fields here */}
                                    <button type="submit">Submit</button>
                                </form>
                            </div>
                        </div>
                    )}
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById('app'));
 </script>

Run

Output of React Close Modal After 5 Seconds

Pasted Image

React JS Tutorial