Bootstrap Modal Popup In React

In this blog, you will learn how to use React Bootstrap Modal in your project.

To use the bootstrap modal, you must install bootstrap in your react application. if you haven’t include bootstrap yet, visit the below link and then continue with this blog.

Install Bootstrap In React

Open your page when you want to use the bootstrap modal popup. for demo purposes, I’ll use the App.js file to show the popup.

Import the below packages on your page. In my case, it will be inside the App.js file.

import React, { useState } from 'react'
import { Modal, Button } from "react-bootstrap";

HTML content as below

<p>
          <button type="button" className="btn btn-danger" onClick={() => handleShow()}>
            Open React Model </button>
        </p>
        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>My Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>The Code Hubs! This is my body content!!!</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
          </Button>
            <Button variant="primary" onClick={handleClose}>
              Save Changes
          </Button>
          </Modal.Footer>
        </Modal>

To handle model open, close events, it will handle by below lines of code.

const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

My page will look like this

import React, { useState } from 'react'
import logo from './logo.svg';
import './App.css';
import { Modal, Button } from "react-bootstrap";

function App() {

  const [show, setShow] = useState(false);

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

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <button type="button" className="btn btn-danger" onClick={() => handleShow()}>
            Open React Model </button>
        </p>
        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>My Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>The Code Hubs! This is my body content!!!</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
          </Button>
            <Button variant="primary" onClick={handleClose}>
              Save Changes
          </Button>
          </Modal.Footer>
        </Modal>
      </header>
    </div>
  );
}

export default App;

Output

Hope you guys found something useful. Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it. If you like this blog you can buy me Pizza.