How can I hide or show Navbar?-CodePudding

Goal: I need to when user is not null then show Navbar for this I use useEffect and useState. How did I understand when the site is loaded user is no longer null so useEffect does not work. How do I make it work?

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import { useState, useEffect } from 'react';
import { auth } from "./components/LoginForm/firebase.js";

function App() {
  const user = auth.currentUser

  const [Navbarshow, setNavbar] = useState(false)

  useEffect(() => {
    if (!user === null) {
      setNavbar(true)
    }
  }, [user])

  return (
    <div className="App">
      <Router>
        {Navbarshow ? <Navbar /> : null}
        <button onClick={() => console.log(Navbarshow, user)}>Test</button>

This is a part of App.js, where is problem

CodePudding user response：

can you please try this I hope this works. thanks

useEffect(() => {
   if (!auth.currentUser) {
     setNavbar(true)
   } else {
     setNavbar(false)
   }
}, [auth.currentUser])