React useContext returns it value but it returns undefined after page is refresh

Question

I am using useContext to get user information in the login page and display it in the home page it displays the information at first but when i refresh the home page the information get lost why please i am a beginner in react

this is where i'm setting the context

const { setContext } = useContext(Context);

  const handleSubmit = async (event) => {
    event.preventDefault();

    const log_in = await fetch("http://localhost:4040/api/v1/account/log_in", {
      method: "POST",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    });
    if (log_in.ok) {
      alert("ok");
      log_in.json().then((data) => {
        setContext({ data });
        console.log(data);
      });
      navigate("/");
    }
    if (!log_in.ok) {
      if (log_in.status >= 400) {
        log_in.json().then((data) => {
          console.log(data);
          setErrorLogin(data.message);
        });
      }
    }
  };

and this where am using it

const { data } = useContext(Context);

  return (
    <nav>
      <div className='nav'>
        <span className='logo'>
          <h2>
            <Link to='/'>Money Video</Link>
          </h2>
        </span>

        <span className='search'>
          <ul>
            <input type='text' name='search' id='search' placeholder='Search video ' autoCorrect='' />
            <button>
              <svg xmlns='http://www.w3.org/2000/svg' color='#26a89df8' height='24' viewBox='0 -960 960 960' width='24'>
                <path d='M782.87-98.52 526.913-354.478q-29.435 21.739-68.152 34.608-38.718 12.87-83.283 12.87-114.087 0-193.544-79.457Q102.477-465.913 102.477-580q0-114.087 79.457-193.544 79.457-79.457 193.544-79.457 114.087 0 193.544 79.457Q648.479-694.087 648.479-580q0 45.13-12.87 83.283-12.869 38.152-34.608 67.021l256.522 257.087-74.653 74.088ZM375.478-413.002q69.913 0 118.456-48.543Q542.477-510.087 542.477-580q0-69.913-48.543-118.456-48.543-48.543-118.456-48.543-69.913 0-118.456 48.543Q208.479-649.913 208.479-580q0 69.913 48.543 118.456 48.543 48.543 118.456 48.543Z' />
              </svg>
            </button>
          </ul>
        </span>

        <span className='profile'>
          <ul>
            <Link className='a' to='/about'>
              About
            </Link>
            <div name='profile'>
              {data.profile ? (
                <img src={profile} alt='profile picture' />
              ) : data.profile === "" ? (
                <span>{data.name.charAt().toUpperCase()}</span>
              ) : (
                <span>N/P</span>
              )}
            </div>
          </ul>
        </span>
      </div>
      <SearchBox className='searchBox' />
      <ProfileUp className='profileUp' />
      <hr />
    </nav>
  );

i have not added the import stat meant so the code should not be much

Answer 1

When you refresh your page your entire app and so your context are re-initialized, so all the stored data and states you have manipulated until the refresh is lost. If you want to persist data you should consider one of this two options: localStorage or sessionStorage (you can google them on MDN docs).

But your choice should depend on the kind of data you want to persist. For sensitive data i highly discourage you to use localStorage or sessionStorage they are not secure. If your main goal is to just preserve state of the app, then they are fine, i'll add cookies and URL Params to the list of possibilities in this last case.

Here it is a basic example on how you can achieve what you are looking for. Please keep in mind that User's sensitive informations like Email and Password should be stored in a safe way usually Encrypted (try to look for bcrypt library on NPM). But if this is not your case then the following code can be a basic solution.

// if log_in.ok
log_in.json().then((data) => {
  setContext({ data });

  // Save user info to Local Storage
  localStorage.setItem('userInfo', JSON.stringify(data)); 

  // make sure data exists
  console.log(data);
});

Now that your data on the localStorage you can retrieve the data where needed when the component mounts.

const { setContext } = useContext(Context);

// You could also run this once in the Context
// so when the context mounts the context is always up to date
// with the data from the localStorage
// of course make sure that useInfo exists in the localStorage
useEffect(() => {
  // get userInfo from localStorage
  const storedUserInfo = localStorage.getItem('userInfo');
  if (storedUserInfo) {
    const data = JSON.parse(storedUserInfo);
    
    // Update context value with data from localStorage
    setContext({ data }); 
  }
// no dependencies needed
}, []);

Now your context should alway be up to date.

Hope this helps. Here some links to document yourself more:

localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

sessionStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

cookies: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

More methods to persist data (2020 but useful): https://blog.bitsrc.io/5-methods-to-persisting-state-between-page-reloads-in-react-8fc9abd3fa2f