Post
Ask Question

How To Create A Modal Pop-Up In ReactJS Application

Introduction

 
In this article, we are going to learn how to create a Modal popup in the ReactJS Application.
 
Prerequisites
  • Basic knowledge of React
  • Visual Studio Code must be installed
  • Node JS must be installed

Create ReactJS project

 
Step 1
 
The very first step is to create a new React.js project using the following command,
  1. npx create-react-app reactmodalpopup
Step 2
 
Open the newly-created project in Visual Studio code and install the following packages that are needed by using the following command,
  1. npm install react-bootstrap
Step 3
 
Next, open app.js then replace complete code with the following,
  1. import React, { Fragment } from 'react';  
  2. import ModalPopup from './modal_popup';  
  3.   
  4. class App extends React.Component {  
  5.   constructor() {  
  6.     super();  
  7.     this.state = {  
  8.       showModalPopup: false  
  9.     }  
  10.   }  
  11.   isShowPopup = (status) => {  
  12.     this.setState({ showModalPopup: status });  
  13.   };  
  14.   render() {  
  15.     return (  
  16.       <Fragment>  
  17.         <h3 align="center">Demo of Modal Pop up in Reactjs</h3>  
  18.         <header align="center">  
  19.           <Fragment>  
  20.             <div  
  21.               className="nav-item"  
  22.               onClick={() => this.isShowPopup(true)}>  
  23.               <button>Modal Pop up</button>  
  24.             </div>  
  25.           </Fragment>  
  26.         </header>  
  27.         <ModalPopup  
  28.           showModalPopup={this.state.showModalPopup}  
  29.           onPopupClose={this.isShowPopup}  
  30.         ></ModalPopup>  
  31.       </Fragment>  
  32.     )  
  33.   }  
  34. }  
  35.   
  36. export default App;  
Step 4
 
Create a JSX file with name modal_popup.jsx and add the following code in that file,
  1. import React, { Component, Fragment } from 'react';  
  2. import { Modal } from 'react-bootstrap';  
  3.   
  4. class ModalPopup extends Component {  
  5.     constructor(props) {  
  6.         super(props);  
  7.         this.state = {  
  8.             showModal: false  
  9.         };  
  10.     }  
  11.   
  12.     isShowModal = (status) => {  
  13.         this.handleClose();  
  14.         this.setState({ showModal: status });  
  15.     }  
  16.   
  17.     handleClose = () => {  
  18.         this.props.onPopupClose(false);  
  19.     }  
  20.   
  21.   
  22.     render() {  
  23.         return (  
  24.             <Fragment>  
  25.                 <Modal show={this.props.showModalPopup} onHide={this.handleClose}  
  26.                     size="lg"  
  27.                     aria-labelledby="contained-modal-title-vcenter"  
  28.                     centered  
  29.                 >  
  30.                     <Modal.Header closeButton>  
  31.                         <Modal.Title id="sign-in-title">  
  32.                             React Modal Pop up Example  
  33.                          </Modal.Title>  
  34.                     </Modal.Header>  
  35.                     <Modal.Body>  
  36.                         <hr />  
  37.                         <div className="signUp">  
  38.                             <p>Want to close the pop up?<button type="button" className="link-button" onClick={() => this.isShowModal(true)}> Close</button></p>  
  39.                         </div>  
  40.                     </Modal.Body>  
  41.   
  42.                 </Modal >  
  43.             </Fragment >  
  44.   
  45.         );  
  46.     }  
  47. }  
  48.   
  49. export default (ModalPopup);  
 
Output
 
Now it's time for the output,
 
 
 

Conclusion

 
In this article, we have learned how to implement a modal popup in our ReactJS Application.
 
Please share your valuable feedback and comments about this article. And if you have any questions regarding this article please ask them in the comment section.


Similar Articles