React Tutorials

React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to use and implement in React. If you are willing to know how to implement Bootstrap Modal dialog in React, then this step-by-step guide is for you.

In this short tutorial, we will learn how to quickly create a modal popup in React using the react-bootstrap and bootstrap modules.

React Bootstrap is used with Bootstrap. Ideally, react-bootstrap is built exclusively for Bootstrap’s javascript-based component.

It is considered one of the best UI frameworks for React js. Therefore we believe it will help us make react modal component with utmost ease.

How to Create Modal Component in React using Bootstrap

  • Step 1: Generate React App
  • Step 2: Make Component File
  • Step 3: Install Bootstrap Modules
  • Step 4: Create Modal Component
  • Step 5: Update App.js File
  • Step 6: Serve React Application

Generate React App

To generate the new react project, paste the following command on the command prompt and then invoke the command.

npx create-react-app react-modal

Move into the blank application’s root.

cd react-modal

Make Component File

Make the /components folder, in here we have to keep the react component files.

There after, create a new file name it /ModalDialog.js file and insert the following code within the file.

import React from 'react'

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

Install Bootstrap Modules

From the command prompt, run the following command; it will install bootstrap and react-bootstrap modules altogether in React app.

npm install react-bootstrap bootstrap

Create Modal Component

Open the ModalDialog.js component file. In this file, you have to carefully import the Modal, and Button modules from the ‘react-bootstrap’ library.

The useState hook is here to help us set and manage the modal popover state.

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

function ModalDialog() {
  const [isShow, invokeModal] = React.useState(false)
  const initModal = () => {
    return invokeModal(!false)
  }

  return (
    <>
      <Button variant="success" onClick={initModal}>
        Open Modal
      </Button>

      <Modal show={isShow}>
        <Modal.Header closeButton onClick={initModal}>
          <Modal.Title>React Modal Popover Example</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="danger" onClick={initModal}>
            Close
          </Button>
          <Button variant="dark" onClick={initModal}>
            Store
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  )
}

export default ModalDialog

Update App.js File

The modal component is almost ready, the ModalDialog component has to go inside the App.js file.

It will now being served throughout our react app.

import React from 'react'

import ModalDialog from './components/ModalDialog'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

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

export default App

Serve React Application

In order to serve the react application on the browser make sure initialize the following command from the command-prompt.

npm start

You can check or run the application on the browser using given url:

http://localhost:3000

Conclusion

A modal dialog is extremely helpful in grabbing the user’s attention. It manifests on top of the primary content that deliberately gets users’ attention.

Throughout this guide, we explained how to create the modal dialog component in React using the bootstrap library and that too from scratch.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

1 day ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

1 week ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago