How i can use props to change my connexion with react js?

Question

i wanna change my menu when my local storage is not empty but i struggled to use the props to do that.

I have my menu with condition on my component Menu and i have my component app with my navigation :

Component Menu

function Menu(props) {
  const showMenu = (props) => {
    if (props.isLoggedIn === true) {
      return (
        <div className="ContainerMenu">
          <ul className="Menu">
            <Link to="/Home">
              {" "}
              <li>who am i</li>
            </Link>
            <li>some of my products</li>
            <Link to="/contact">
              <li>Contact me</li>
            </Link>
            <Link to="/">
              <li className="connexion">Connexion</li>
            </Link>
          </ul>
        </div>
      );
    } else {
      return (
        <div className="ContainerMenu">
          <ul className="Menu">
            <Link to="/">
              <li className="connexion">Connexion</li>
            </Link>
          </ul>
        </div>
      );
    }
  };

  useEffect(() => {
    showMenu();
  }, []);

  return <div>{showMenu()}</div>;
}

export default Menu;

I wanna set my loggedIn true when i have my email on my local Storage. I would love to do that with props but i think i've missing something ?

function App(props) {
  const [isLoggedIn, setLoggedIn] = useState(false);

  const ifLoggedIn = () => {
    if (localStorage.getItem("connexion")) {
      setLoggedIn(true);
    }
  };

  useEffect(() => {
    ifLoggedIn();
    console.log(isLoggedIn);
  });

  return (
    <Router>
      <div>
        <Menu isLoggedIn={ifLoggedIn} />
        <Switch>
          <Route path="/contact" component={MeContacter} />
          <Route path="/Home" component={Home} />
          <Route path="/" component={Connexion} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

Answer 1

You have a typo

Replace:

 <Menu isLoggedIn={ifLoggedIn} />

By :

 <Menu isLoggedIn={isLoggedIn} />

---

Your menu component is not well structured :

function Menu(props) {
  const showMenu = () => {
    if (props.isLoggedIn === true) {
      return (
        <div className="ContainerMenu">
          <ul className="Menu">
            <Link to="/Home">
              {" "}
              <li>who am i</li>
            </Link>
            <li>some of my products</li>
            <Link to="/contact">
              <li>Contact me</li>
            </Link>
            <Link to="/">
              <li className="connexion">Connexion</li>
            </Link>
          </ul>
        </div>
      );
    } else {
      return (
        <div className="ContainerMenu">
          <ul className="Menu">
            <Link to="/">
              <li className="connexion">Connexion</li>
            </Link>
          </ul>
        </div>
      );
    }
  };

  return <div>{showMenu()}</div>;
}

export default Menu;