How to Build Modal Popup Component in React with Bootstrap

Developers always look for ready-made custom solutions to swiftly build the features or functionality. Who doesn’t like the eloquent programming solutions?

It makes more sense when you are stuck at something you have never dealt with before.

Here, we are trying to demystify the recipe of modal dialog in React. We will teach you how to profoundly create Modal dialog in React js application using the Bootstrap package.

There are two ways to create a component in React. First method is to use the class based component, and second method is to write the code in functional component.

We will go by the second method and use the functional component for building bootstrap modal in React js application.

To build the React modal component, you will require specific ingredients; those ingredients (prerequisites) are:

  • IDE or Code Editor
  • Node / NPM
  • Basic React app
  • Bootstrap
  • React Bootstrap Package

If your arsenal is filled up with the above weapons, let’s start the war of creating modal dialog in React.

React Bootstrap Modal with Functional Component Example

  • Step 1: Build New Project
  • Step 2: Install React Bootstrap Packages
  • Step 3: Formulate Component
  • Step 4: Build Bootstrap Modal in React
  • Step 5: Add Component in App
  • Step 6: Run React App

Build New Project

A pivot point of this tutorial is a React application, a new app we will install.

However, there is no compulsion to follow this step if the react app is already present on your system.

npx create-react-app react-howdy

Next, move inside the project folder.

cd react-howdy

Install React Bootstrap Packages

In this step, again open the terminal, type the following command, hit enter to install the bootstrap, and react-bootstrap packages altogether.

npm install react-bootstrap bootstrap

Formulate Component

Inside your project folder, create /components directory, again make the /BotModal.js file.

Below mentioned code formulates a basic function component in react.

import React from 'react'

export default function BotModal() {
  return (
    <div>BotModal</div>
  )
}

Build Bootstrap Modal in React

Next, import the advised libraries and code in BotModal.js file, we are not importing the useState named module, however accessing it directly inside the component.

Make sure to define the bootstrap modal popup tags inside the component file.

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

export default function BotModal() {
  const [isModalOpen, setModal] = React.useState(false)
  const initModal = () => {
    return setModal(!false)
  }

  return (
    <>
      <Button variant="primary" onClick={initModal}>
        Show Bootstrap Modal
      </Button>

      <Modal show={isModalOpen}>
        <Modal.Header closeButton onClick={initModal}>
          <Modal.Title>React Bootstrap Modal</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          You never know how strong you are unless being strong is the only
          choice you have.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="danger" onClick={initModal}>
            Close
          </Button>
          <Button variant="dark" onClick={initModal}>
            Save
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  )
}

Add Component in App

Now, we are left with adding the BotModal component inside the App.js, this process will make the modal appear on the browser when the app is ready.

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import BotModal from './components/BotModal'

function App() {
  return (
    <div className="container mt-5">
      <BotModal />
    </div>
  )
}

export default App

Run React App

Now, all the efforts have been put, lets run the app development server. You can do that by executing the given code from the terminal.

npm start

Here we go, this is how your modal popup or modal dialog display in react app.

How to Build Modal Popup Component in React with Bootstrap

Summary

Modal popups are generally used to grab the user’s attention, especially when the user lands on a particular page.

In this tutorial, we tried to show you the fusion of React and Bootstrap Modal to build the bootstrap modal example.

Integrating bootstrap in react is easy, and we also made the modal integration in react functional component far easy with our step-by-step explanation.