This content originally appeared on DEV Community and was authored by karkikamal098
"import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
const Register = () => {
const [userData, setUserData] = useState({
name: "",
email: "",
password: "",
password2: "",
});
const [error, setError] = useState("");
const navigate = useNavigate();
const changeInput = (e) => {
setUserData((prevState) => {
return {
...userData,
[e.target.name]: e.target.value,
};
});
};
const registerUser = async (e) => {
e.preventDefault();
try {
const response = await axios.post(
`${process.env.React_App_BASE_URL}/users/register`,
userData
);
const newUser = await response.data;
console.log(newUser);
if (!newUser) {
setError("could not register, please try again");
}
} catch (err) {
if (err.response && err.response.data) {
setError(
err.response.data.message || "Registration failed. Please try again."
);
} else {
setError("An unknown error occurred. Please try again.");
}
}
};
return (
Sign Up
{error &&
{error}
} <input
type="text"
placeholder="Name"
name="name"
value={userData.name}
onChange={changeInput}
/>
<input
type="email"
placeholder="Email"
name="email"
value={userData.email}
onChange={changeInput}
/>
<input
type="password"
placeholder="Password"
name="password"
value={userData.password}
onChange={changeInput}
/>
<input
type="password"
placeholder="confirm Password"
name="password2"
value={userData.password2}
onChange={changeInput}
/>
<button type="submit" className="btn_category">
Register
</button>
{/* <small>Already have an account?</small> */}
<Link to="/login">Login</Link>
</form>
</section>
);
};
export default Register;
This content originally appeared on DEV Community and was authored by karkikamal098
karkikamal098 | Sciencx (2024-09-25T07:11:55+00:00) why my this error ” {error && <p className=”form_error”>{error}</p>}” is not showing in the frontend? (help-begineer). Retrieved from https://www.scien.cx/2024/09/25/why-my-this-error-error-p-classnameform_errorerror-p-is-not-showing-in-the-frontend-help-begineer/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.