check cookie on page load in react

Question

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;

Tanzim Siddiqee · Accepted Answer · 2022-08-11 16:07:55Z

Please try with the Effect Hook (useEffect)

import React, { useState, useEffect } 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);
  }

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    checkCookie();
    console.log('useEffect called');
  },[]);

  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;

Nicholas · Accepted Answer · 2022-08-11 15:58:02Z

0

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:

edited Aug 11, 2022 at 15:58

answered Aug 11, 2022 at 15:52

Nicholas

2,8731 gold badge16 silver badges21 bronze badges

2 Comments

Hanif Ramadhani Over a year ago

can I delete the onLoaded? @Nicholas

Nicholas Over a year ago

Of course you can delete it. onLoaded is not a valid prop anyways, so deleting it would cause no problems at all. I've edited my answer to also delete that prop.

Collectives™ on Stack Overflow

check cookie on page load in react

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related