React Bootstrap Modal Example

React-bootstrap modal example in class component example; In this tutorial, you will learn how to integrate bootstrap modal in react js app using bootstrap 4 library.

With React Bootstrap, you can easily create a modal that can be used to display content, gather user input, or perform other actions. The Modal component in React Bootstrap provides a simple and flexible way to create modals with various options such as size, animation, and backdrop. The component is fully customizable, allowing you to change the appearance and behavior of the modal to match your application’s needs. Whether you’re building a simple modal for displaying alerts or a complex modal for collecting user data, React Bootstrap Modal Example provides a reliable and efficient solution for creating modals in your React applications.

Now in this tutorial, you will learn step by step how to make bootstrap modal component in react js app using the bootstrap 4 plugin.

How to Create Bootstrap Modal in React JS

Follow the following steps to create bootstrap modal in react js app:

• Step 1 – Create React App
• Step 2 – Install React Bootstrap
• Step 3 – Create Bootstrap Modal Component
• Step 4 – Add Bootstrap Modal Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

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

Step 2 – Install React Bootstrap

In this step, execute the following command to install react boostrap 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

In this step, create BootstrapModalComponent.js file. So, visit the src directory of your react js app and create a modal component file named BootstrapModalComponent.js. And add the following code into it:

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 – Add Bootstrap Modal Component in App.js

In this step, you need to add 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

React-bootstrap modal example in-class component example; In this tutorial, you have learned how to integrate bootstrap modal in react js app using bootstrap 4 libraries.

Recommended React JS Posts