How to Trigger Modal for React Bootstrap
Introduction
React Bootstrap is a pure React implementation of the popular Bootstrap CSS framework. The react-bootstrap library does not use jQuery under the hood, as manipulating DOM directly is considered an anti-pattern in the React ecosystem. Therefore, the jQuery methods to trigger or close a modal aren't going to work. Since React Bootstrap Modal is a React component, you have the flexibility to control the component's behavior using state or hooks.
In this guide, you will learn how to trigger a React Bootstrap Modal programmatically using state.
Set Up The Modal Component
The first step is to import the Modal component from the react-bootstrap library. Along with it, import the Button component that will trigger the modal on click.
1import { Modal, Button } from "react-bootstrap";Once you have imported the component, write the static markup for the modal.
1class App extends Component {
2 render() {
3 return (
4 <Modal>
5 <Modal.Header closeButton>
6 <Modal.Title>Modal heading</Modal.Title>
7 </Modal.Header>
8 <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
9 <Modal.Footer>
10 <Button variant="secondary">Close</Button>
11 </Modal.Footer>
12 </Modal>
13 );
14 }
15}
16
17export default App;Add The State and Methods
Next, define the state and the methods to close and open the modal.
1class App extends Component {
2 state = {
3 isOpen: false
4 };
5
6 openModal = () => this.setState({ isOpen: true });
7 closeModal = () => this.setState({ isOpen: false });
8
9 render() {
10 //...
11 }
12}Add a button inside the render block to trigger the modal.
1class App extends Component {
2 // ...
3 render() {
4 <>
5 <div
6 className="d-flex align-items-center justify-content-center"
7 style={{ height: "100vh" }}
8 >
9 <Button variant="primary" onClick={this.openModal}>
10 Launch demo modal
11 </Button>
12 </div>
13 <Modal>{/* ... */}</Modal>
14 </>;
15 }
16}When the button is clicked, the isOpen state will be set to true. Now, to display the modal, all you need to do is pass the isOpen state value to the show prop of the <Modal /> component.
1<Modal show={this.state.isOpen}>{/* ... */}</Modal>If you check out the result at this point, you'll notice that the modal opens up just fine, but there's no way to close it. So, set the isOpen state to false when the user clicks on the Close button inside the modal. There's also an onHide prop ofthe <Modal /> component that closes the modal when the user clicks on the overlay or presses the Esc button.
1<Modal show={this.state.isOpen} onHide={this.closeModal}>
2 <Modal.Header closeButton>
3 <Modal.Title>Modal heading</Modal.Title>
4 </Modal.Header>
5 <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
6 <Modal.Footer>
7 <Button variant="secondary" onClick={this.closeModal}>
8 Close
9 </Button>
10 </Modal.Footer>
11</Modal>Now you should be able to close the modal as well. Pretty easy, right?
Final Component
Take a look at the final component below.
1import React, { Component } from "react";
2import { Modal, Button } from "react-bootstrap";
3
4class App extends Component {
5 state = {
6 isOpen: false
7 };
8
9 openModal = () => this.setState({ isOpen: true });
10 closeModal = () => this.setState({ isOpen: false });
11
12 render() {
13 return (
14 <>
15 <div
16 className="d-flex align-items-center justify-content-center"
17 style={{ height: "100vh" }}
18 >
19 <Button variant="primary" onClick={this.openModal}>
20 Launch demo modal
21 </Button>
22 </div>
23 <Modal show={this.state.isOpen} onHide={this.closeModal}>
24 <Modal.Header closeButton>
25 <Modal.Title>Modal heading</Modal.Title>
26 </Modal.Header>
27 <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
28 <Modal.Footer>
29 <Button variant="secondary" onClick={this.closeModal}>
30 Close
31 </Button>
32 </Modal.Footer>
33 </Modal>
34 </>
35 );
36 }
37}
38
39export default App;Use the `useState` hook
You can also trigger the modal in a functional component by using the useState hook.
The state and the methods can be declared as follows. The rest is same as the class component, but instead of this.state.isOpen, pass the showModal state variable to the show prop of the <Modal /> component.
1const [showModal, setShow] = useState(false);
2
3const handleClose = () => setShow(false);
4const handleShow = () => setShow(true);Check out the complete code below.
1import React, { useState } from "react";
2import { Modal, Button } from "react-bootstrap";
3
4function App() {
5 const [showModal, setShow] = useState(false);
6
7 const handleClose = () => setShow(false);
8 const handleShow = () => setShow(true);
9
10 return (
11 <>
12 <div
13 className="d-flex align-items-center justify-content-center"
14 style={{ height: "100vh" }}
15 >
16 <Button variant="primary" onClick={handleShow}>
17 Launch demo modal
18 </Button>
19 </div>
20 <Modal show={showModal} onHide={handleClose}>
21 <Modal.Header closeButton>
22 <Modal.Title>Modal heading</Modal.Title>
23 </Modal.Header>
24 <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
25 <Modal.Footer>
26 <Button variant="secondary" onClick={handleClose}>
27 Close
28 </Button>
29 <Button variant="primary" onClick={handleClose}>
30 Save Changes
31 </Button>
32 </Modal.Footer>
33 </Modal>
34 </>
35 );
36}
37
38export default App;Conclusion
You must use controlled components that use the internal state to set the values and change the behavior of a component. Libraries like jQuery do direct DOM manipulation, whereas React components use Virtual DOM to modify the actual DOM on the browser. Using jQuery to change your component's behavior is possible. Still, it will lead to unexpected results and make it difficult to debug. React Bootstrap implements each component in pure React, so you don't have to worry about Bootstrap's dependency on jQuery.