So I've Managed to made an html form for my react app. The problem is that I cannot output on my console log the inputs on my form. it just shows me this: Console Log Output Pic

Here is my code snippet:

import { useState } from "react";

const InputForm = (props) => {
  const [inputData, setInputData] = useState(
    {
      enteredFName: "",
      enteredLName: "",
      enteredEmail: "",
      enteredEid: "",
      enteredBirthday: "",
    },
    []
  );

  //First Name Validation
  const [enteredFName, setEnteredFName] = useState("");
  const [enteredFNameTouch, setEnteredFNameTouch] = useState(false);

  const enteredFNameFilled = enteredFName.trim() !== "";
  const enteredFNameNotFilled = !enteredFNameFilled && enteredFNameTouch;

  const enteredFNameValid = /^[A-Za-z\s] $/.test(enteredFName);
  const enteredFNameInvalid = !enteredFNameValid && enteredFNameNotFilled;

  const fNameChangeHandler = (event) => {
    setEnteredFName(event.target.value);
  };

  const fNameBlurHandler = () => {
    setEnteredFNameTouch(true);
  };

  //Last Name Validation
  const [enteredLName, setEnteredLName] = useState("");
  const [enteredLNameTouch, setEnteredLNameTouch] = useState(false);

  const enteredLNameFilled = enteredLName.trim() !== "";
  const enteredLNameNotFilled = !enteredFNameFilled && enteredLNameTouch;

  const enteredLNameValid = /^[A-Za-z\s] $/.test(enteredLName);
  const enteredLNameInvalid = !enteredLNameValid && enteredLNameNotFilled;

  const lNameChangeHandler = (event) => {
    setEnteredLName(event.target.value);
  };

  const lNameBlurHandler = () => {
    setEnteredLNameTouch(true);
  };

  //EmailValidation
  const [enteredEmail, setEnteredEmail] = useState("");
  const [enteredEmailTouch, setEnteredEmailTouch] = useState(false);

  const enteredEmailFilled = enteredEmail.trim() !== "";
  const enteredEmailNotFilled = !enteredEmailFilled && enteredEmailTouch;

  const enteredEmailValid = enteredEmail.includes("@");
  const enteredEmailInvalid = !enteredEmailValid && enteredEmailNotFilled;

  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
  };

  const emailBlurHandler = () => {
    setEnteredEmailTouch(true);
  };

  //EIDValidation
  const [enteredEid, setEnteredEid] = useState("");
  const [enteredEidTouch, setEnteredEidTouch] = useState(false);

  const enteredEidFilled = enteredEid.trim() !== "";
  const enteredEidNotFilled = !enteredEidFilled && enteredEidTouch;

  const eidChangeHandler = (event) => {
    setEnteredEid(event.target.value);
  };

  const eidBlurHandler = () => {
    setEnteredEidTouch(true);
  };

  //Birthday Validation
  const [enteredBirthday, setEnteredBirthday] = useState("");
  const [enteredBirthdayTouch, setEnteredBirthdayTouch] = useState(false);

  const enteredBirthdayFilled = enteredBirthday.trim() !== "";
  const enteredBirthdayNotFilled =
    !enteredBirthdayFilled && enteredBirthdayTouch;

  const birthdayChangeHandler = (event) => {
    setEnteredBirthday(event.target.value);
  };

  const birthdayBlurHandler = () => {
    setEnteredBirthdayTouch(true);
  };

  let formValid = false;
  if (
    enteredFNameFilled &&
    enteredLNameFilled &&
    enteredEmailFilled &&
    enteredEidFilled &&
    enteredBirthdayFilled
  ) {
    formValid = true;
  }

  const formSubmitHandler = (event) => {
    event.preventDefault();

    if (!enteredFNameValid || !enteredLNameValid) {
      alert("First Name and Last Name accepts letters only.");
      return;
    }

    console.log(inputData);

    setEnteredFName("");
    setEnteredFNameTouch(false);
    setEnteredLName("");
    setEnteredLNameTouch(false);
    setEnteredEmail("");
    setEnteredEmailTouch(false);
    setEnteredEid("");
    setEnteredEidTouch(false);
    setEnteredBirthday("");
    setEnteredBirthdayTouch(false);
  };

  return (
    <form onSubmit={formSubmitHandler}>
      <div>
        <h1>Please Enter your details below</h1>
      </div>
      <div className="control-group">
        <div>
          <label>First Name</label>
          <input
            type="text"
            required
            id="fName"
            onChange={fNameChangeHandler}
            onBlur={fNameBlurHandler}
            value={enteredFName}
          />
          {enteredFNameInvalid && <p>First Name is required.</p>}
        </div>
        <div>
          <label>Last Name</label>
          <input
            type="text"
            required
            id="lName"
            onChange={lNameChangeHandler}
            onBlur={lNameBlurHandler}
            value={enteredLName}
          />
          {enteredLNameInvalid && <p>Last Name is required.</p>}
        </div>
      </div>
      <div>
        <label>Email</label>
        <input
          type="email"
          required
          id="email"
          onChange={emailChangeHandler}
          onBlur={emailBlurHandler}
          value={enteredEmail}
        />
        {enteredEmailInvalid && <p>Email is required.</p>}
      </div>
      <div>
        <label>EID</label>
        <input
          type="number"
          required
          min="1"
          step="1"
          id="eid"
          onChange={eidChangeHandler}
          onBlur={eidBlurHandler}
          value={enteredEid}
        />
        {enteredEidNotFilled && <p>EID is required.</p>}
      </div>
      <div>
        <label>Birthday</label>
        <input
          type="date"
          required
          id="birthday"
          onChange={birthdayChangeHandler}
          onBlur={birthdayBlurHandler}
          value={enteredBirthday}
        />
        {enteredBirthdayNotFilled && <p>Birthday is required.</p>}
      </div>
      <div>
        <button type="submit" disabled={!formValid}>
          Submit
        </button>
      </div>
    </form>
  );
};

export default InputForm;

How do I utilize the setInputData for my overall form submission? because I don't know where to put it on the code.

CodePudding user response：

I don't think you need the inputData state, since all your values are already saved in other state variables.

Can you try to console log the following in your formSubmitHandler:

console.log({
  enteredFName,
  enteredLName,
  enteredEmail,
  enteredEid,
  enteredBirthday,
})

If you insist on keeping the separate state object for submitted values, you can just replace the console.log by setInputData in formSubmitHandler:

setInputData({
  enteredFName,
  enteredLName,
  enteredEmail,
  enteredEid,
  enteredBirthday,
}

CodePudding user response：

First of all , If you have multi form in your react project, try to use your own hook or use react form hook or formik to make it easier and lower code , its better to get object from Form and pass it like this :

setInputData(data)

If is not possible , set each property in setInputData, and if you have a lot of state , try to write dynamic handler function instead of function for each item , like this :

function handle(type,value){
  useState(prev => {
   ...prev,
   [type]:value
 })
}