React 17 Bootstrap Modal Example

React 17 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.

What happens a lot of times is that you need a modal pop-up in your react app. In that modal, you display the data or a form is created and with the help of this form, data can be sent to the server. So in this tutorial, you will learn how to create and use modal components in React App using Bootstrap 4 library.

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

  • 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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *