Author avatar

Gaurav Singhal

How to Trigger Modal for React Bootstrap

Gaurav Singhal

  • May 7, 2020
  • 6 Min read
  • 116 Views
  • May 7, 2020
  • 6 Min read
  • 116 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 have any dependency on jQuery, which means jQuery methods to trigger or close modals won't work. But since React Bootstrap Modal is a React component, you can use the state to control the component's behavior.

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.

1
import { Modal, Button } from "react-bootstrap";
jsx

Once you have imported the component, write the static markup for the modal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class App extends Component {
  render() {
    return (
      <Modal>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary">Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

export default App;
jsx

Add The State and Methods

Next, define the state and the methods to close and open the modal.

1
2
3
4
5
6
7
8
9
10
11
12
class App extends Component {
  state = {
    isOpen: false
  };

  openModal = () => this.setState({ isOpen: true });
  closeModal = () => this.setState({ isOpen: false });

  render() {
    //...
  }
}
jsx

Add a button inside the render block to trigger the modal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class App extends Component {
  // ...
  render() {
    <>
      <div
        className="d-flex align-items-center justify-content-center"
        style={{ height: "100vh" }}
      >
        <Button variant="primary" onClick={this.openModal}>
          Launch demo modal
        </Button>
      </div>
      <Modal>{/* ... */}</Modal>
    </>;
  }
}
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
2
3
4
5
6
7
8
9
10
11
<Modal show={this.state.isOpen} onHide={this.closeModal}>
  <Modal.Header closeButton>
    <Modal.Title>Modal heading</Modal.Title>
  </Modal.Header>
  <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={this.closeModal}>
      Close
    </Button>
  </Modal.Footer>
</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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React, { Component } from "react";
import { Modal, Button } from "react-bootstrap";

class App extends Component {
  state = {
    isOpen: false
  };

  openModal = () => this.setState({ isOpen: true });
  closeModal = () => this.setState({ isOpen: false });

  render() {
    return (
      <>
        <div
          className="d-flex align-items-center justify-content-center"
          style={{ height: "100vh" }}
        >
          <Button variant="primary" onClick={this.openModal}>
            Launch demo modal
          </Button>
        </div>
        <Modal show={this.state.isOpen} onHide={this.closeModal}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.closeModal}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}

export 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.

1
2
3
4
const [showModal, setShow] = useState(false);

const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
jsx

Check out the complete code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React, { useState } from "react";
import { Modal, Button } from "react-bootstrap";

function App() {
  const [showModal, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <div
        className="d-flex align-items-center justify-content-center"
        style={{ height: "100vh" }}
      >
        <Button variant="primary" onClick={handleShow}>
          Launch demo modal
        </Button>
      </div>
      <Modal show={showModal} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export 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.

0