Refresh Navbar after Loggin/Loggout in ReactJS

JavaScript
1

After a succesfull login or logout i would like to let the navbar render
so it shows the correct navbar links .
The code works fine, but it doesnt re-render it only shows the correct
navbar links when I refresh the page

App.js:

function App() {
const[name,setName]= useState('');
const[isLogged, setIsLogged] = useState(false);

  useEffect(() =>{

    (async () => {

       const response =  await fetch(`/api/user`);
       const content = await response.json();
     setName(content.name)
     if(response.status === 200){
      setIsLogged(true);
     }else{setIsLogged(false)}
   })()  

 },[]);

return (
    <Router> 
      <div className="App">
        <Navbar name ={name} Logged={isLogged} />
etc.....

Navbar.js:

onst Navbar = ({name,Logged}) => {

let menu;

if(Logged == false)
{
  menu =(
  <div className="links">
  <Link to="/">Home</Link>
  <Link to="Login">Login</Link>
  <Link to="Register">Register</Link>
  </div>)
}
else {
  menu =
  (
  <div className="links">
  <Link to="/">Home</Link>
  <Link to="Create">Create</Link>
  <Link to="UserInfo">User</Link>
  <Link to="Logout">logout</Link>
  </div>
  )
}


    return ( 
      <nav className="navbar">
      <h1>Mobile-Shop {name}</h1>

     {menu}
     
      </nav>
     );
}
 
export default Navbar;
2

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