I am stuck.Help

import React, { useContext ,useEffect,useState} from "react";
import UserMenuHeader from "../Authentication/UserMenuHeader";
import SignInMenuHeader from "../Authentication/SignInMenuHeader";
import { LoginContext } from "../Context";
import HeaderMenu from "./HeaderMenu";

import { Link } from "react-router-dom";
import usefavStore from "../States_Store/favStore";

function Header() {
  const { loggedIn, setLoggedIn } = useContext(LoginContext);
  //const totalFavorites = usefavStore((state) => state.getTotalFavorites());
  //const favStore = usefavStore();
  const totalFavorites = usefavStore((state) => state.count); // Use the hook here

  console.log(`Total favorites: ${totalFavorites}`);
  useEffect(() => {
    document.body.style.overflowY = 'scroll';
    return () => {
      document.body.style.overflowY = 'auto';
    };
  }, []);
  return (
    <nav className="navbar navbar-expand-lg">
      <div className="container">
        {/* Logo START */}
        <Link className="text-body" to="/">
          <div
            style={{
              fontFamily: "Nunito Sans",
              fontSize: 35,
            }}
          >
            <i>lookflock</i>
          </div>
        </Link>

        {/* Logo END */}

        {/* Responsive navbar toggler */}
        {/* <button
          className="navbar-toggler ms-auto icon-md btn btn-light p-0"
          type="button"
          // data-bs-toggle="collapse"
          data-bs-target="#navbarCollapse"
          aria-controls="navbarCollapse"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-animation">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </button> */}

        {/* Main navbar START */}

        {/* <HeaderMenu /> */}
        <div className="collapse navbar-collapse" id="navbarCollapse">
          <HeaderMenu />
        </div>

        {/* Main navbar END */}

        {/* Nav right START */}
        <ul className="nav flex-nowrap align-items-center list-unstyled position-relative">
          <li className="nav-item ms-2">
            <a className="nav-link icon-md btn btn-light p-0" href="/favorites">
              <i className="bi bi-heart-fill fs-6"> </i>
              {totalFavorites > 0 && (
                <span
                  className="position-absolute translate-middle badge rounded-pill bg-danger"
                  style={{ top: '7px', right: '30px', zIndex: '2' }}
                >
                  {totalFavorites}
                </span>
              )}
            </a>
          </li>
          {loggedIn ? <UserMenuHeader /> : <SignInMenuHeader />}
        </ul>
        {/* Nav right END */}
      </div>
    </nav>
  );
}

export default Header;

this is my Header.js
it should show the UserMenuHeader after signing in, but it is showing in the SignInMenuHeader even after signing in. what’s the issue?

Hi Muhammad,

The Header component that shows depend on the value of the loggedIn variable.

From the code above, I can see that you receive the value from the LoginContext.

You need to make sure that the loggedIn variable contains true to show the UserMenuHeader component.

First, trace your code and see if somewhere in your code the loggedIn variable has been set to true.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.