how to hide a bootstrap modal using React JSX - reactjs

Question

I am learning react and I want to close a bootstrap modal after a 'Post' callback
So, in the below code I want to hide the modal in the 'hideModal' method when onClick={() => postDocument.callApi(this.state.document, this.hideModal)} calls back.
How can I do this?
import React, { Component } from "react";
import postDocument from "./../rest/PostDocument";
import fetchPersons from "./../rest/FetchPersons";
import PersonList from "./../components/PersonList";
import ShowDatePicker from "./../components/ShowDatePicker";
import moment from "moment";
class SaveDocument extends Component {
state = {
persons: [],
document: {
documentDate: moment(),
personFrom: {
id: ""
},
personTo: {
id: ""
},
comments: ""
}
};
hideModal = hideModalInfo => {
// How do I hide the modal here!
};
render() {
return (
<div
className="modal fade"
id="basicExampleModal"
tabIndex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
Save document
</h5>
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-primary"
onClick={() => postDocument.callApi(this.state.document, this.hideModal)}
>
Save changes
</button>
</div>
</div>
</div>
</div>
);
}
}
export default SaveDocument;

Answer 1

You can import jquery and call Bootstrap's modal("hide") method...
import $ from "jquery";
...
hideModal = hideModalInfo => {
$("#myModal").modal("hide");
};
https://codesandbox.io/s/ykkvl7547j

Answer 2

A different approach is to simulate a .click() on the close button,
...
const closeRef = useRef();
...
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
ref={useRef}
>
...
<button
type="button"
className="btn btn-primary"
onClick={() => {closeRef.current.click()}}
>
Save changes
</button>

Answer 3

you should bind that method. onClick={this.handleClick}
class SaveDocument extends Component {
constructor(props){
super(props);
state = { ... }
//This binding is necessary to make `this` work in the callback
this.hideModal = this.hideModal.bind(this);
}
render(){
return (<button
type="button"
onClick={this.hideModal)}
>)
}
};
more info about bindings
Also, i have a basic example working:
https://codepen.io/ene_salinas/pen/yRGMpG
ReactModal.setAppElement('#main');
class ExampleApp extends React.Component {
constructor () {
super();
this.state = {
showModal: false
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal () {
this.setState({ showModal: true });
}
handleCloseModal () {
this.setState({ showModal: false });
}
render () {
return (
<div>
<button onClick={this.handleOpenModal}>Trigger Modal</button>
<ReactModal
isOpen={this.state.showModal}
contentLabel="onRequestClose Example"
onRequestClose={this.handleCloseModal}
className="Modal"
overlayClassName="Overlay"
>
<p>Modal text!</p>
<button onClick={this.handleCloseModal}>Close Modal</button>
</ReactModal>
</div>
);
}
}
const props = {};
ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))
In your code (if you have jquery):
constructor(){
this.state = { hideModal = true }
}
hideModal() {
this.state.hideModal = true
//i dont recommend, i prefer use the state
$("#modal").hide()
};
showModal() {
this.state.hideModal = false
//i dont recommend, i prefer use the state
$("#modal").show()
};
render(){
<button value="open modal" onClick={showModal} />
//div modal
<div class={this.state.hideModal ? 'hide' : 'show'}>
<button value="close modal" onClick={hideModal} />
</div>
}

Answer 4

bootstarp has jquery based functions so
1.if you use jquery here use this one
$("#basicExampleModal").modal("hide");
2.Or we can use data-dismiss="modal" to that button
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>