Important Update
The Guide Feature will be discontinued after December 15th, 2023. Until then, you can continue to access and refer to the existing guides.
Author avatar

Gaurav Singhal

How to Trigger Modal for React Bootstrap

Gaurav Singhal

  • Sep 15, 2020
  • 6 Min read
  • 77,607 Views
  • Sep 15, 2020
  • 6 Min read
  • 77,607 Views
Web Development
Front End Web Development
Client-side Framework
React

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";
jsx

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;
jsx

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}
jsx

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}
jsx

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>
jsx

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>
jsx

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;
jsx

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);
jsx

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;
jsx

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.