mixed payload data fields in react signup form

Question

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"

Answer 1

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.