I am trying to submit a login form in my React application. I have attached the loginUser
function to the form’s onSubmit
event. However, when I press the login button, nothing happens, and no errors are shown in the console.
Interestingly, if I move the loginUser
function to the button’s onClick
event, it works as expected. I want the form to be submitted via the form’s onSubmit
event, not the button’s onClick
event. What could be causing this issue?
const toggleButton = () => {
console.log("Clicking toggle button");
setIsLogin((prev) => !prev);
};
const loginUser = (e) => {
console.log("I am Login Now...!");
e.preventDefault();
};
<form
style={{
width: "100%",
marginTop: "10px",
marginBottom: "10px",
}}
onSubmit={loginUser}
>
<TextField
required
fullWidth
label="UsernameOrEmail"
margin="normal"
variant="outlined"
/>
<PasswordInput />
<Button
fullWidth
variant="contained"
color="info"
type="submit"
sx={{
marginTop: "10px",
marginBottom: "10px",
fontSize: "1.2rem",
textTransform: "capitalize",
fontWeight: "600",
letterSpacing: "0.05rem",
padding: "0.5rem 1rem",
}}
>
Login
</Button>
<Typography
textAlign={"center"}
margin={"1rem"}
fontWeight={"600"}
>
OR
</Typography>
<Button color="primary" fullWidth onClick={toggleButton}>
Register Instead
</Button>
</form>