React Bootstrap Modal Example

In this tutorial, we will show you how to install & integrate Bootstrap library into a React JS app and how to create a Bootstrap modal popup.

How to Create Bootstrap Modal in React JS

Steps to create a bootstrap modal in React JS app:

Step 1 – Create React App

Run the following command on your terminal to create a new react app:

npx create-react-app my-react-app

Run the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install React Bootstrap

Run the following command to install the react bootstrap library into your react app:

npm install bootstrap --save

npm install react-bootstrap bootstrap

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>How to Create Bootstrap Modal Popup in React</h2>
    </div>
  );
}
export default App;

Step 3 – Create Bootstrap Modal Component

Create BootstrapModalComponent.js file in src directory, and create a popup modal using bootstrap:

import React from 'react'
import { Button,Modal } from 'react-bootstrap'
class BootstrapModalComponent extends React.Component{
    constructor(){
        super();
        this.state = {
            showHide : false
        }
    }
    handleModalShowHide() {
        this.setState({ showHide: !this.state.showHide })
    }
    render(){
        return(
            <div>
                <Button variant="primary" onClick={() => this.handleModalShowHide()}>
                    Launch demo modal
                </Button>
                <Modal show={this.state.showHide}>
                    <Modal.Header closeButton onClick={() => this.handleModalShowHide()}>
                    <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.handleModalShowHide()}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={() => this.handleModalShowHide()}>
                        Save Changes
                    </Button>
                    </Modal.Footer>
                </Modal>
            </div>
        )
    }

}
export default BootstrapModalComponent;

Step 4 – Import Bootstrap Modal Component in App.js

In this step, you need to import BootstrapModalComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import BootstrapModalComponent from './BootstrapModalComponent'
function App() {

  return (
    <div className="App">
      <BootstrapModalComponent />
    </div>
  );
}
export default App;

Conclusion

In this tutorial, you have learned how to integrate the bootstrap modal in react js app using bootstrap libraries.

Recommended React JS Posts