I am really new to react i created a sign up form but when posting data values are mixed I created onchange and onsubmit to track changes and submit the to backend server but I get badrequest because values are mixed in payload
const Signup = ({ signup, isAuthenticated }) => {
const [accountCreated, setAccountCreated] = useState(false);
const [formData, setFormData] = useState({
username: "",
password: "",
email: "",
first_name: "",
last_name: "",
profile_type: "",
});
const { username, password, email, first_name, last_name, profile_type } = formData;
const onChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = (e) => {
e.preventDefault();
signup(username, password, email, first_name, last_name, profile_type);
setAccountCreated(true);
};
if (isAuthenticated) {
return <Redirect to="/" />;
}
if (accountCreated) {
return <Redirect to="/login" />;
}
return (
<div className="container mt-5">
<h1>Sign Up</h1>
<p>Create your Account</p>
<form onSubmit={(e) => onSubmit(e)}>
<div className="form-group">
<input
className="form-control"
type="text"
placeholder="Username"
name="username"
value={username}
onChange={(e) => onChange(e)}
required
/>
</div>
<div className="form-group">
<input
className="form-control"
type="password"
placeholder="Password"
name="password"
value={password}
onChange={(e) => onChange(e)}
minLength="6"
required
/>
</div>
<div className="form-group">
<input
className="form-control"
type="email"
placeholder="Email*"
name="email"
value={email}
onChange={(e) => onChange(e)}
required
/>
</div>
<div className="form-group">
<input
className="form-control"
type="text"
placeholder="First Name*"
name="first_name"
value={first_name}
onChange={(e) => onChange(e)}
required
/>
</div>
<div className="form-group">
<input
className="form-control"
type="text"
placeholder="Last Name*"
name="last_name"
value={last_name}
onChange={(e) => onChange(e)}
required
/>
</div>
<div className="form-group">
<select
className="form-control"
name="profile_type"
onChange={(e) => onChange(e)}
required
>
<option value="">--------</option>
<option value="STD">
Student
</option>
<option value="PRF">
Professor
</option>
</select>
</div>
<button className="btn btn-primary" type="submit">
Register
</button>
</form>
<p className="mt-3">
Already have an account? <Link to="/login">Sign In</Link>
</p>
</div>
);
};
const mapStateToProps = (state) => ({
isAuthenticated: state.auth.isAuthenticated,
});
export default connect(mapStateToProps, { signup })(Signup);
and when I submit this is what I get in payload all values mixed but the email and profile type are correct how can I fix this?
{username: "lastname", password: "firstname", email: "[email protected]", first_name: "username1",…}
email: "[email protected]"
first_name: "username1"
last_name: "Password"
password: "firstname"
profile_type: "STD"
username: "lastname"
to be like this
{username: "username1", password: "Password", email: "[email protected]", first_name: "firstname",…}
email: "[email protected]"
first_name: "firstname"
last_name: "lasttname"
password: "Password"
profile_type: "STD"
username: "username1"
CodePudding user response:
Try to check the parameters order in sign up method .. or try this code (e) => setFormData({...formData, property name: e.target.value})
in onChange method in each input.