React Input Form Value In An Array

Question

I am trying to build a registration form, I have built the login form and it works perfectly, but the registration form is quite off.

First I used the react-dev tools to inspect what is going on and I realized that each input value coming from the registration form happens to be in an array.
I went back to the login form to inspect and saw that the value of the input fields is in the right format (strings). But the value from each specific input field in the registration form is in an array. What could I be doing wrong?
I tried to replicate what I did in the login form in the registration form, but it is still coming in an array. Also, should hooks be kept in its own separate file?

This is what I see from the react-dev tools for the registration form.

Here is a code snippet of what I did.

const Signup = (props) => {
  const authContext = useContext(AuthContext);
  const { register, clearErrors, isAuthenticated, error } = authContext;
  const [loadBtn, updateLoadBtn] = useState(false);
  const [user, setUser] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    username: "",
    phoneNumber: "",
  });

  useEffect(() => {
    if (isAuthenticated) {
      successMessage();
      props.history.push("/dashboard");
    }

    if (error) {
      missingValue(error);
      updateLoadBtn(false);
      clearErrors();
    }

    //eslint-disable-next-line
  }, [isAuthenticated, error, props.history]);

  const { firstName, lastName, email, password, username, phoneNumber } = user;
  const onChange = (e) =>
    setUser({ ...user, [e.target.name]: [e.target.value] });

  const onSubmit = (e) => {
    e.preventDefault();
    updateLoadBtn(true);
    if (
      !firstName ||
      !lastName ||
      !email ||
      !password ||
      !username ||
      !phoneNumber
    ) {
      missingValue("Please enter all fields");
      updateLoadBtn(false);
      clearErrors();
    } else {
      register({
        firstName,
        lastName,
        email,
        password,
        username,
        phoneNumber,
      });
    }
  };

  return (
    <Fragment>
      <ToastContainer />
      <RegContainer className="container-fluid py-4">
        <RegInfo />
        <RegColumn
          onChange={onChange}
          onSubmit={onSubmit}
          firstName={firstName}
          lastName={lastName}
          email={email}
          password={password}
          phoneNumber={phoneNumber}
          loadBtn={loadBtn}
        />
      </RegContainer>
    </Fragment>
  );
}

That is the file responsible for handling the registration.

Here is the custom component

const RegColumn = ({
  firstName,
  onSubmit,
  onChange,
  lastName,
  username,
  password,
  phoneNumber,
  email,
  loadBtn,
}) => {
  const bodyStyle = document.querySelector("body").style;
  bodyStyle.backgroundImage = "linear-gradient(to bottom, #F6F6F2, #C2EDCE)";
  bodyStyle.backgroundRepeat = "no-repeat";
  bodyStyle.overflow = "hidden";
  bodyStyle.height = "100%";
  bodyStyle.fontFamily = "Rubik, sans-serif";
  return (
    <Fragment>
      <div id="reg-column">
        <h3 style={{ color: "#388087" }}>REGISTRATION</h3>
        <Form divid="form-row1-label" onSubmit={onSubmit}>
          <LabelContainer id="form-row1-label">
            <LabelContainer id="firstNameLabel">
              <LabelInfo labelfor="firstName" labeltitle="First Name" />
            </LabelContainer>
            <LabelContainer id="lastNameLabel">
              <LabelInfo labelfor="lastName" labeltitle="Last Name" />
            </LabelContainer>
          </LabelContainer>
          <InputContainer id="form-row1-input">
            <InputContainer id="firstNameInput">
              <Input
                type="text"
                name="firstName"
                value={firstName}
                id="firstName"
                onChange={onChange}
              />
            </InputContainer>
            <InputContainer id="lastNameInput">
              <Input
                type="text"
                onChange={onChange}
                name="lastName"
                value={lastName}
                id="lastName"
              />
            </InputContainer>
       // ...

Thank you.

Remove brackets on on e.target.value; it makes the value an array. — bertdida
– bertdida, Commented Sep 12, 2020 at 10:05
Thank you very much for pointing that out, it fixed the error. — thatguy
– thatguy, Commented Sep 12, 2020 at 10:12

MwamiTovi · Accepted Answer · 2020-09-13 02:25:45Z

1

Within your Signup form, you have this...

  // ...
  const onChange = (e) =>
    setUser({ ...user, [e.target.name]: [e.target.value] });

What's happening above?

The onChange() is responsible for updating the values to be submitted.
Within setUser, you are passing a value as a literal array using [e.target.value]

Solution:

Remove the literal array [] and pass value as it's received i.e. e.target.value
The left hand side, e.target.name, is fine since you are actually using a computed property name.

You can also read more about handling forms in react.

answered Sep 13, 2020 at 2:25

MwamiTovi

2,52219 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Input Form Value In An Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related