Refresh Navbar after Loggin/Loggout in ReactJS

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


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

  useEffect(() =>{

    (async () => {

       const response =  await fetch(`/api/user`);
       const content = await response.json();
     if(response.status === 200){


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


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>
else {
  menu =
  <div className="links">
  <Link to="/">Home</Link>
  <Link to="Create">Create</Link>
  <Link to="UserInfo">User</Link>
  <Link to="Logout">logout</Link>

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

export default Navbar;

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