Problem : I have a button whose function is to log out, but when I log in as the page performs an autorefresh of it, it is automatically pressed and logs out, that is, it does not allow people to log in because it automatically logs them out as soon as the page loads. another page with the logout button.
Code
return (
<div className="App container">
<div className="justify-content-center row">
<h1 style={{ color: "white" }}>Bienvenido</h1>
</div>
<div className="justify-content-center row">
<button
type='button'
className="btn btn-warning"
onClick={setUserInfo(null)}
>
Logout
</button>
</div>
</div>
);
}
return (
<div className="App container">
<div className="justify-content-center row">
<h1 style={{ color: "white" }}>Inicio de sesion</h1>
</div>
<Link to="/Register" className="nav-item nav-link active">
Registro
</Link>
<div className="justify-content-center row">
<form className="mt-5" onSubmit={handleLogin}>
<label>
<p>Username</p>
<input required type="text" onChange={(e) => setUsuario(e.target.value)} />
</label>
<label>
<p>Password</p>
<input
required
type="password"
onChange={(e) => setPassword(e.target.value)}
/>
</label>
<div>
<button type='button' className="btn btn-success" type="submit">
Iniciar Sesión
</button>
</div>
</form>
</div>
</div>
);
try changing this on line 10 of the code you posted
What is happening is that when you activate a form, the form is sent automatically. What you need is to avoid that when you press the button it runs automatically.
You should modify the event of the form to perform the action you want to do:
After this you should assign it in the form
<form onSubmit={handleLogin}>