Resolved the issue by implementing the solution provided above, here is the updated code snippet.
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
const SignupPage = (props) => {
const navigate = useNavigate();
const [showPassword, setShowPassword] = useState(false);
const [showConfmPassword, setShowConfmPassword] = useState(false);
const goToLogin = () => {
navigate("/login");
};
const [credentials, setCredentials] = useState({
name: "",
email: "",
password: "",
confmpassword: "",
role: "guest",
forgetQues: "",
forgetAns: "",
});
const onChange = (e, key) => {
setCredentials((prevCredentials) => ({
...prevCredentials,
[key]: e.target.value,
}));
//console.log(credentials);
};
const handleSubmit = async (e) => {
e.preventDefault();
const response = await fetch("http://localhost:5000/api/signup", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: credentials.name,
email: credentials.email,
password: credentials.password,
role: credentials.role,
forgetQues: credentials.forgetQues,
forgetAns: credentials.forgetAns,
}),
});
const json = await response.json();
//console.log(json);
if (json.success === true) {
localStorage.setItem("token", json.authToken);
navigate("/");
props.showAlert("User Registered Successfully !", "info");
} else {
props.showAlert("Invalid Credentials", "danger");
}
};
function togglePasswordVisibilty() {
setShowPassword(!showPassword ? true : false);
}
function toggleConfmPasswordVisibilty() {
setShowConfmPassword(!showConfmPassword ? true : false);
}
return (
<>
<div className="container my-3">
<div id="loginbody">
<div className="mt-3">
<h2 className="my-3 display-3">Set up your account now </h2>
<form className="login-form p-5" onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor="name" className="form-label">
Name
</label>
<input
type="text"
className="form-control"
id="name"
name="name"
value={credentials.name}
onChange={(e) => onChange(e, "name")}
aria-describedby="emailHelp"
/>
</div>>
...
Login Here!
</button>
</div>
</form>
</div>
</div>
</div>
</>
);
};
export default SignupPage;