<div className="Image popup">
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
contentLabel="Image popup"
>
<img src="../img/navratri-1.png" alt="Image popup" />
<button onClick={closeModal}>Close</button>
</Modal>
</div>;
useEffect(() => {
const hasShownImagePopup = localStorage.getItem("hasShownImagePopup");
if (!hasShownImagePopup) {
localStorage.setItem("hasShownImagePopup", "true");
setModalIsOpen(true);
}
}, []);
const closeModal = () => {
setModalIsOpen(false);
};
In this, I am expecting a popup image to show on screen. Like a website where, when the user enters the home page, the image is shown, and when the user clicks the close button, the image is closed.
2
Answers
Here,
!hasShownImagePopup
only returnstrue
whenhasShownImagePopup
is "".Because in Local Storage, data is stored in a string format.
So, we should check if
hasShownImagePopup
is not"true"
.Also, you should probably set
hasShownImagePopup
in LocalStorage to"false"
when you close the Modal. This will make the popup showup again when you visit the page again.Here is a CodePen example.
Can you try the below code snippet,