Ternary not updating view in React

Question

I've got this fairly simple NavBar component and I want it to display different buttons depending if you are logged in or not. It works when you first load the page and aren't logged in. And it updates the view when you log in appropriately. However, when you log out, the view is not updated and you continue to see the buttons in the truthy branch. The logout function is in fact removing the token from localStorage - the view just isn't updating. Any advice?

import React from 'react';
import { NavLink } from 'react-router-dom';
import '../App.css';

function Navigation() {
    const logout = function () {
        localStorage.removeItem('username');
        localStorage.removeItem('token');
    };

    return (
        <>
            {localStorage.getItem('token') ? (
                <div className='nav'>
                    <NavLink to='/' className='link'>
                        Home
                    </NavLink>
                    <NavLink to='/login' className='link' onClick={logout}>
                        Log Out
                    </NavLink>
                </div>
            ) : (
                <div className='nav'>
                    <NavLink to='/register' className='link'>
                        {' '}
                        Register{' '}
                    </NavLink>
                    <NavLink to='/login' className='link'>
                        Log In
                    </NavLink>
                </div>
            )}
        </>
    );
}
export default Navigation;

Answer 1

You have to cause a rerender somehow, I'd probably just do:

import { NavLink } from 'react-router-dom'
import '../App.css';

function Navigation () {
    const [loggedIn, setLoggedIn] = React.useState(!!localStorage.getItem('token'))
    const logout = function(){
        localStorage.removeItem('username')
        localStorage.removeItem('token')
        setLoggedIn(false);
    }

    return (
        <>
        {loggedIn
        ? (<div className='nav'><NavLink to='/' className='link'>Home</NavLink> <NavLink to='/login' className='link' onClick={logout}>Log Out</NavLink></div>)
        : (<div className='nav'> <NavLink to='/register' className='link'>Register</NavLink> <NavLink to='/login' className='link'>Log In</NavLink></div>)
        }
        </>
    )

}
export default Navigation