React Js Bootstrap Modal Popup

React Js Bootstrap Modal Popup

If you are working with React Js and want to create a modal or a popup in your web application, Bootstrap Modal can be a great option. Bootstrap Modal is a plugin that enables you to create a popup window that appears on top of the current web page. You can use it to display important information, ask for user input, or present other types of content.

Steps to Create a Modal Popup in React Js using Bootstrap:

1. Import Bootstrap CSS and JavaScript files into your project:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  

1. Create a component for your Modal:

    import React, { Component } from 'react';
    
    class MyModal extends Component {
      render() {
        return (
          <div className="modal" tabIndex="-1" role="dialog">
            <div className="modal-dialog" role="document">
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title">Modal Title</h5>
                  <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div className="modal-body">
                  <p>Modal Content</p>
                </div>
                <div className="modal-footer">
                  <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" className="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>
        );
      }
    }
    
    export default MyModal;
  

1. Create a button to trigger the Modal:

    import React, { Component } from 'react';
    import MyModal from './MyModal';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>
            <MyModal />
          </div>
        );
      }
    }
    
    export default App;
  

There are different ways to create a Modal Popup in React Js. You can use React-Bootstrap, a library of reusable front-end components for React, which includes pre-built Modal components. Alternatively, you can create your own Modal component using React portals, which enable you to render content outside the current DOM hierarchy.