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

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"));
}

Answer 2

You can use data-dismiss="modal" to close Modal as Close Button
If you want use state closeModal, you can do add like this:
{!closeModal && <div id="myModal">{/* ... */}</div>}