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,

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,

npm install react-bootstrap

Step 3

Next, open app.js then replace complete code with the following,

import React, { Fragment } from 'react';
import ModalPopup from './modal_popup';
class App extends React.Component {
constructor() {
super();
this.state = {
showModalPopup: false
}
}
isShowPopup = (status) => {
this.setState({ showModalPopup: status });
};
render() {
return (
<Fragment>
<h3 align="center">Demo of Modal Pop up in Reactjs</h3>
<header align="center">
<Fragment>
<div
className="nav-item"
onClick={() => this.isShowPopup(true)}>
<button>Modal Pop up</button>
</div>
</Fragment>
</header>
<ModalPopup
showModalPopup={this.state.showModalPopup}
onPopupClose={this.isShowPopup}
></ModalPopup>
</Fragment>
)
}
}
export default App;

Step 4

Create a JSX file with name modal_popup.jsx and add the following code in that file,

import React, { Component, Fragment } from 'react';
import { Modal } from 'react-bootstrap';
class ModalPopup extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false
};
}
isShowModal = (status) => {
this.handleClose();
this.setState({ showModal: status });
}
handleClose = () => {
this.props.onPopupClose(false);
}
render() {
return (
<Fragment>
<Modal show={this.props.showModalPopup} onHide={this.handleClose}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="sign-in-title">
React Modal Pop up Example
</Modal.Title>
</Modal.Header>
<Modal.Body>
<hr />
<div className="signUp">
<p>Want to close the pop up?<button type="button" className="link-button" onClick={() => this.isShowModal(true)}> Close</button></p>
</div>
</Modal.Body>
</Modal >
</Fragment >
);
}
}
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.