Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

289
Vistas
React OnClick={function() { } } Not Doing Anything

This is what my code looks like:

function Header() {
    const [{ user }, dispatch] = useStateValue();
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const navigate = useNavigate();
    let buttonHit = false;

    const handleAuth = () =>
    {
        auth.onAuthStateChanged((authUser) => 
        {
            if (authUser)
            {
                console.log("sume else");
                auth.signOut();
            }
            else
            {
                console.log("sum");
                navigate('/Login');
            }  
        });
    }

    return (
        <Navbar className="navbar" bg="dark" variant="dark" expand="lg">
                <Link className="navbar-brand" to='/'><Navbar.Brand>Scythe's Sweet Treats</Navbar.Brand></Link>
                <Navbar.Toggle aria-controls="main-navbar" />
                <Navbar.Collapse id="main-navbar">
                    <Nav className="mr-auto">
                        <Link to='/' className="nav-links">Home</Link>
                        <Link to='/Products' className="nav-links">Products</Link>
                        <Link to='/About' className="nav-links">About</Link>
                        <Link to='/Gallery' className="nav-links">Gallery</Link>
                        <Link to='/ContactUs' className="nav-links">Contact Us</Link>
                    </Nav>
                    <Nav className="ms-auto">
                        {(user) ? user.uid === 'TirT8syQ6jdbaFPTC0So2HLlsie2' ? <Link className="nav-links" to='/Admin'>Admin</Link> : <Link to='#' className="d-none"></Link> : null}
                        <Link className='nav-links' to='#'>Hello, {!user ? 'Guest': user.email}</Link>
                        <Link onclick={() => handleAuth()} to="#" className="nav-links">{user ? 'Sign Out' : 'Sign In'}</Link>
                    </Nav>
                </Navbar.Collapse>
        </Navbar>
    )
}

I've been having the issue that when I login the onclick is fired immediately and logs the user out, so I changed it because I read a stackOverflow with the same problem. But changing it to {function() {handleAuth()} } or {() => {handleAuth()}} or {() => handleAuth()}

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I'm closing this now because I did find a work around, but the issue was the when i did onClick={handleAuth} it would trigger as soon as the page loads and logout the user, but when i did onClick={() => handleAuth()} it didn't do anything, not even console.logs would show up. My work around ended up being using a link and a to="loginRedirect" to make a page that checks if there is a user and handles signin/signout on its own. But with that I was having the same issue where it would logout the user immediately. I ended up using window.location.replace instead of useNavigate for this reason. Read the other comment to see why navigate didn't work.

Edit: Forgot you can't just close a question on stackoverflow lmao

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda