Skip to content
Related Articles
Open in App
Not now

Related Articles

How to open or close react-bootstrap modal pro-grammatically?

Improve Article
Save Article
  • Last Updated : 16 Jul, 2020
Improve Article
Save Article

A modal is a pop-up or a dialog box that is placed on the current page to display the message that needs to be read. Using the react-bootstrap UI library, we will program the modal using hooks in a functional component.

We can use the useState() hooks to open/close a react-bootstrap modal . The useState function is a built in hook that allows us to add state to a functional component without switching to a class component.

const [state, setState] = useState(initialState);

The first value state represents the current state whereas the second value is used to update the state of a function. The useState function takes an argument as the default value. Before proceeding further there is one prerequisite.


  • Installed react-bootstrap:  
npm install react-bootstrap bootstrap
  • Import bootstrap.min.css:
import 'bootstrap/dist/css/bootstrap.min.css';
  • Import built-in hook useState:
import React, {useState} from "react";
  • Import individual components such as Button and Modal
import Button from 'react-bootstrap/Button';



import React, {useState} from "react";
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
function Example() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
      <Button variant="primary" onClick={handleShow}>
        Launch static backdrop modal
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
          I will not close if you click outside me.
          Don't even try to press
          escape key.
          <Button variant="primary" onClick={handleClose}>
export default Example;



import React from "react";
import ReactDOM from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import App from "./App";
const rootElement = document.getElementById("root");
    <App />


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!