Dont show me again message with react hooks

Question

I have modal which shows when user visit my page now I want a user to be able to hide this modal so that doesn't show the modal again using local storage or cookies

Here is a live demo on code sandbox: dont show me again

Js code

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import Modal from "./Modal";
import useModal from "./useModal";

import "./styles.css";

const App = () => {
  const { isShowing, toggle } = useModal();
  const [cookieConsent, showCookieConsent] = useState(true);
  const [checked, setIsChecked] = useState(0);

  const handleOnchange = (e) => {
    setIsChecked(e.target.value);
  };
  let modalStorage = localStorage.setItem("hide", checked);

  useEffect(() => {
    toggle();
    if (modalStorage) {
      showCookieConsent(false);
    }
  }, []);

  const clearStorage = () => {
    localStorage.clear();
  };
  return (
    <div className="App">
      <button onClick={clearStorage}> Clear Storage</button>
      {cookieConsent === false && (
        <Modal
          isShowing={isShowing}
          handleOnchange={handleOnchange}
          hide={toggle}
        />
      )}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Now when I click the checkbox and close the modal and I refresh the page it shows again instead of hiding it

What am I doing wrong here?

Answer 1

I changed a few things

const handleOnchange = (e) => {
    setIsChecked(e.target.checked);
    localStorage.setItem("hide", e.target.checked)
};
  
useEffect(() => {
    toggle();
    let modalStorage = localStorage.getItem("hide", checked);
    if (modalStorage) {
      showCookieConsent(false);
    }
}, []);

Answer 2

I've used a custom hook to solve a similar issue. Sharing the code in case it helps anyone.

// useInfoBanner.jsx
import { useEffect, useState } from "react";

import { getFromLocalStorage, setToLocalStorage } from "utils/storage";

const useInfoBanner = (key) => {
  const [showInfoBanner, setShowInfoBanner] = useState(false);

  const handleHideInfoBanner = () => {
    setShowInfoBanner(false);
    setToLocalStorage(key, true);
  };

  useEffect(() => {
    const isHideInfoBanner = getFromLocalStorage(key);
    isHideInfoBanner ? setShowInfoBanner(false) : setShowInfoBanner(true);
  }, []);

  return [showInfoBanner, handleHideInfoBanner];
};

export default useInfoBanner;

// utils/storage.js
export const getFromLocalStorage = key =>JSON.parse(localStorage.getItem(key));
export const setToLocalStorage = (key, value) =>
  localStorage.setItem(key, JSON.stringify(value));

// You can use this in your components like so
  const [showInfoBanner, handleHideInfoBanner] = useInfoBanner("hideSettingsInfoBanner");

//.. then in return

{showInfoBanner && <InfoBanner />}