How To Add Bootstrap Modal In React JS

Websolutionstuff | Sep-09-2022 | Categories : Bootstrap React JS

In this article, we will see how to add a bootstrap modal in react js. In this example, we will use the bootstrap modal and button component and also use the react-bootstrap library. You can also learn how to create a modal popup in react js.

For react modal popup example, we will install react-bootstrap using the npm and use the modal class to create a modal and launch the modal in the react js application.

So, let's see how to use bootstrap modal in react js and react modal popup on button click.

Install react-bootstrap

In this step, we will install bootstrap using the npm. So, let's follow the below command and install bootstrap.

npm install react-bootstrap bootstrap

After successfully installing bootstrap, we need to import bootstrap CSS in the src/index.js file.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
   
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

 

 

Create Bootstrap Modal Popup

Now, we will create a bootstrap modal. So, add the below code in the app.js file.

src/App.js

import React, {useState} from 'react';
import { Button, Modal } from 'react-bootstrap';
import "./styles.css";

function App() {
  const [show, setShow] = useState(false);
   
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
   
  return (
    <div className="container">
      <h2>How To Add Bootstrap Modal In React JS - Websolutionstuff</h2>
   
      <Button variant="primary" onClick={handleShow}>
        Open Model
      </Button>
   
      <Modal size="lg" show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>How To Add Bootstrap Modal In React JS - Websolutionstuff</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </Modal.Body>
        <Modal.Footer>         
          <Button variant="primary" onClick={handleClose}>
            Save
          </Button>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}
   
export default App;

 

Add CSS

In this step, we will add CSS to the styles.css file

.App {
  font-family: sans-serif;
  text-align: center;
}
h2{
  margin-bottom: 20px;
  margin-top: 60px;
}

 

 

Output:

how_to_add_bootstrap_modal_in_react_js_output

 


You might also like:

Recommended Post
Featured Post
How To Send Mail Using Gmail In Laravel 9
How To Send Mail Using Gmail I...

In this article, we will see how to send mail using gmail in laravel 9. we will learn laravel 9 to send mail u...

Read More

Aug-03-2022

How To Create Pagination Using jQuery
How To Create Pagination Using...

In this article, we will see how to create pagination using jquery. We will create jquery pagination using mul...

Read More

Nov-08-2022

Server Side Custom Search in Datatables
Server Side Custom Search in D...

In this example we will discuss about server side custom search in datatable. Datatable provides default searching...

Read More

Apr-05-2021

How To Create Dependent Dropdown In Laravel
How To Create Dependent Dropdo...

In this article, we will see how to create a dependent dropdown list in laravel using ajax. Many times we have requ...

Read More

Jul-05-2020