How to close bootstrap modal after submit form in React JS?

Question

I have User.js file to submit form and I am trying to submit form using bootstrap modal. I have no problem to submit data into database.

But I have a problem to close bootstrap modal after I trigger onSubmit={createUser}.

I add onClick={handleCloseModal} and set it into false after I clicked on submit button.

But bootstrap modal isn't close. I don't have any idea what I am doing.

Here's my code in User.js.

import axios from 'axios';
import { data } from 'jquery';
import React, { useEffect, useState } from 'react';
import { Redirect, Link } from 'react-router-dom'; 

const Users = () => {

    const [users, setUsers]             = useState([]);   
    const [name, setName]               = useState('');       
    const [closeModal, setCloseModal]   = useState(false);

    function handleCloseModal(){
        document.getElementById("myModal").classList.remove("show", "d-block", "modal-open");  
        document.getElementsByClassName("modal-backdrop")[0].classList.remove("modal-backdrop");
    }

    useEffect( () => {
        (
            async () => {
                const {data} = await axios.get('getUsers');
                setUsers(data);
            }
        )()
    }, []); 

    // Add
        const createUser = async (e) => {

            e.preventDefault();

            await axios.post('createUser', {
                name            : name 
            }).then(
                async () => {
                    const {data} = await axios.get('getUsers');
                    setUsers(data);
                }
            );  

            setCloseModal(true);
            
        }
    // Add

    return( 
            <>
                {/* Page Content */}
                    <div className="container-fluid">
                        <div className="row">
                            <div className="col-lg-12 col-md-12"> 
                                <div className="row">
                                    <div className="col-lg-12">
                                        <div className="card card-outline-info">
                                            <div className="card-header">
                                                <h4 className="m-b-0 text-white">Users</h4>
                                            </div>
                                            <div className="card-body">

                                                {/* Modal */} 
                                                {!closeModal &&
                                                    <div id="myModal" className="modal bs-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style={{display: 'none', overflowY: 'auto'}}>
                                                        <div className="modal-dialog modal-lg">
                                                            <div className="modal-content">
                                                                <div className="modal-header">
                                                                    <h4 className="modal-title" id="myModalLabel">Fields <font color="red">*</font> asterisk required</h4>
                                                                    <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                </div> 
                                                                <div className="modal-body"> 
                                                                    <form className="" id="" action="" onSubmit={createUser}> 
                                                                        
                                                                        <div className="col-md-12">
                                                                            <div className="form-group row">
                                                                                <label className="control-label text-right col-md-3"><font color="red">*</font> Name</label>
                                                                                <div className="col-md-9">   
                                                                                    <input type="text" id="name" className="form-control name" name='name' placeholder=""
                                                                                        onChange={e=>setName(e.target.value)}
                                                                                    />
                                                                                    <small className="form-control-feedback"></small> 
                                                                                </div>
                                                                            </div>
                                                                        </div> 

                                                                        <div className="modal-footer">
                                                                            <button type="button" className="btn btn-info waves-effect" data-dismiss="modal">Close</button>
                                                                            <button type="submit" className="btn btn-success waves-effect text-left" id="" onClick={handleCloseModal}>Create</button>
                                                                        </div>

                                                                    </form> 
                                                                </div>  
                                                            </div> 
                                                        </div> 
                                                    </div> 
                                                }
                                                {/* Modal */}

                                                {/* Content Layout Here */} 
                                                    <button type="button" data-toggle="modal" data-target="#myModal" className="btn btn-xs btn-success">Add User</button>
                                                    
                                                    <div className="table-responsive"> 
                                                        <table id="table-user">
                                                            <thead>
                                                                <tr>
                                                                    <th style={{verticalAlign: 'top'}}>No</th>   
                                                                    <th style={{verticalAlign: 'top'}}>Name</th>  
                                                                </tr> 
                                                            </thead> 
                                                            <tbody>  
                                                                {users.map((user) => {
                                                                    return(
                                                                        <tr key={user.id}> 
                                                                            <td>{user.name}</td> 
                                                                        </tr>
                                                                    )
                                                                })}
                                                            </tbody>     
                                                        </table> 
                                                    </div> 
                                                {/* Content Layout Here */}

                                            </div>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div> 
                {/* Page Content */}

            </>  
    );
}

export default Users;

UPDATE :

Before I submit

After I submit

Am I missing something here ?

Appreciate someone can help me on this issue.

Many thanks.

Answer 1

Try this:

function handleCloseModal(){
    document.getElementById("myModal").classList.remove("show");
}

For Bootstrap 4 try this:

function handleCloseModal(){            
    document.getElementById("myModal").classList.remove("show", "d-block");
}

EDIT

To remove the grey background after the closing of modal, you can do this:

function handleCloseModal(){            
    document.getElementById("myModal").classList.remove("show", "d-block");
    document.querySelectorAll(".modal-backdrop")
            .forEach(el => el.classList.remove("modal-backdrop"));
}