check cookie on page load in react-CodePudding

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 onl oaded={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;

CodePudding user response：

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:

CodePudding user response：

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;