React Bootstrap Modal - Implement Bootstrap Modal Ex

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

React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. As one of the oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an excellent choice as your UI foundation.

React-bootstrap modal example in class component example tutorial; i will create a bootstrap pop modal in react js app using the bootstrap 4 plugin.

Note that, Before use bootstrap modal , you must have to install react-bootstrap into your react apps.

How to Create Bootstrap Modal in React

Step 1 – Create React App
Step 2 – Install React Bootstrap
Step 3 – Create Bootstrap Modal Component
Step 4 – Import 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

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

Import BootstrapModalComponent.jsfile 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 component example; In this tutorial, you have learned how to integrate bootstrap modal in react js app using bootstrap 4 libraries.

React Bootstrap Modal – Implement Bootstrap Modal Ex