submit form with react redux - reactjs

Question

i implement a single form for each sign up/ login with redux i test the apis with postman before trying to submit data with forms so the login form works fine but when i try to submit the register form nothing happened , just i got the console log message in the navigator console ..
here is my code :
form.js
import React, { useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import PropTypes from "prop-types";
import { useForm } from "react-hook-form";
import { login } from "../../redux/index";
import loginSvg from "../../images/Login-amico.svg";
import signUpSvg from "../../images/signup.svg";
function Form({ page }) {
const dispatch = useDispatch();
const navigate = useNavigate();
const userLogin = useSelector((state) => state.userLogin);
const { error: loginError, loading: loginLoading, userInfo } = userLogin;
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
if (page !== "signUp") {
dispatch(login(data.email, data.password));
} else {
console.log("smthg else");
}
};
useEffect(() => {
if (userInfo) {
navigate("/app/dashboard", { replace: true });
}
}, [navigate, userInfo]);
return (
<form onSubmit={handleSubmit(onSubmit)} >
{page === "signUp" ? (
<div className="mb-3">
<label>User Name</label>
<input
type="text"
className="form-control"
placeholder="user name"
{...register("userName", {
required: true,
className:
"form-control form-control-lg",
type: "text",
placeholder: "User Name",
})}
/>
</div>
) : undefined}
<div className="mb-3">
<label>Email address</label>
<input
type="email"
className="form-control"
placeholder="Enter email"
{...register("email", {
required: true,
className: "form-control",
type: "email",
placeholder: "Email address",
})}
/>
</div>
<div className="mb-3">
<label>Password</label>
<input
type="password"
className="form-control"
placeholder="Enter password"
{...register("password", {
required: true,
className: "form-control",
type: "password",
placeholder: "Password",
})}
/>
</div>
<div className="d-grid">
<button type="submit" className="btn btn-primary">
Submit
</button>
</div>
<p className="forgot-password text-right">
Already registered sign in?
</p>
</form>
);
}
Form.propTypes = {
page: PropTypes.string.isRequired,
};
export default Form;
how can i solve this issue ?

Answer 1

Unfortunately I can't comment yet but I have a suggestion. I'm not very familiar with the useForm hook but I see in your onSubmit function that if page is signUp you will execute only a console.log message. Maybe you should add some dispatch to this condition as well.