React Js Popup Modal Example

How can I create a popup modal using React.js?

This code snippet demonstrates a simple example of a popup modal in React.js. The modal is displayed when the "Open Popup" button is clicked and is closed when either the "X" button, "Close" button, or "Save" button is clicked.

The code utilizes React hooks such as useState, useRef, and useEffect. The useState hook is used to manage the state of the popup, determining whether it should be shown or not. The useRef hook is used to create a reference to the modal element. The useEffect hook is used to add and remove an event listener to close the popup when the user clicks outside the modal.

Inside the return statement, conditional rendering is used to show or hide the modal based on the showPopup state. The modal itself is wrapped inside a <div> element with the class name "modal". It contains a header, body, and footer with corresponding content and buttons.

The "Open Popup" button triggers the openPopup function, which sets the showPopup state to true. The "X" button and "Close" button trigger the closePopup function, which sets the showPopup state to false. The "Save" button triggers the saveModal function, which displays an alert and then closes the popup.

The modal also includes a feature to close the popup when the user clicks outside the modal, achieved through the closeModalOnClickOutside function. It checks if the click event target is outside the modal element using the contains method of the modalRef reference, and if so, it calls the closePopup function.