check cookie on page load in react

August 11, 2022

I want to check cookie on page load in react. After the page load the function checkCookie not executed because the console.log inside the function not appear in console. how to execute the checkCookie? Here my code :

import React, { useState } from "react";
import { useCookies } from "react-cookie";
function App() {
  const [cookies, setCookie, removeCookie] = useCookies(["janganTampil"]);
  const [isCookieSet, setIsCookieSet] = useState(false);
  // state for modal
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  function checkCookie() {
    const tampil = cookies.janganTampil === 'true';
    if (tampil) {
      setIsCookieSet(true);
    } else {
      handleShow();
    }
    console.log(isCookieSet);
    console.log(show);
  }
  return (
    <div onLoaded={checkCookie} className="App">
      ...
      {/* Tutorial is modal */}
      <Tutorial isCookieSet={isCookieSet} setIsCookieSet={setIsCookieSet} cookies={cookies} setCookie={setCookie} removeCookie={removeCookie} handleClose={handleClose} show={show} ></Tutorial>
    </div>
  );
}
export default App;

>Solution :

div elements do not load. onload event(s) can only be used in several elements of the DOM, and div is not one of them. onload events can only be used with these: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, and <style>.

The solution to your problem is to use a hook, in this case we use useEffect. Here’s a fixed version of your code:

import React, { useState } from "react";
import { useCookies } from "react-cookie";

function App() {
  const [cookies, setCookie, removeCookie] = useCookies(["janganTampil"]);
  const [isCookieSet, setIsCookieSet] = useState(false);
  // state for modal
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  function checkCookie() {
    const tampil = cookies.janganTampil === 'true';
    if (tampil) {
      setIsCookieSet(true);
    } else {
      handleShow();
    }
    console.log(isCookieSet);
    console.log(show);
  }

  // An effect which will be loaded once on load. `[]` means
  // no dependencies, so the hook will only be run just once only.
  useEffect(() => {
    // Call this function when this hook is running. It isn't
    // and async function or the like, so a 'normal call' like this
    // is enough.
    checkCookie();
  }, []);

  // Notice that I deleted the `onLoaded` prop here. It isn't valid.
  return (
    <div className="App">
      ...
      {/* Tutorial is modal */}
      <Tutorial isCookieSet={isCookieSet} setIsCookieSet={setIsCookieSet} cookies={cookies} setCookie={setCookie} removeCookie={removeCookie} handleClose={handleClose} show={show} ></Tutorial>
    </div>
  );
}
export default App;

References: