HANDLE MULTIPLE INPUTS

A FORM MAY CONSIST OF MULTIPLE INPUT TAGS, WRITING STATEVARIABLES,FUNCTIONS FOR EVERY INPUT TAG BECOMES DIFFICULT.

HENCE , WE CREATE A COMMON HANDLER FOR ALL INPUTS. COMMON HANDLER REFERS TO A SINGLE FUNCTION THAT GETS INVOKED ON EVERY "onChange" OF INPUT TAG.

AS THE EVENT OBJECT CONSISTS TARGET VALUE CAN BE USED TO TRACK CHANGES AND CONTROL.

INSTEAD OF DECLARING MULTIPLE STATE VARIABLES, WE CAN DECLARE AN OBJECT THAT CONSIST OF ALL STATE VARIABLES RELATED TO FORMS.

 let [formData, setFormData] = useState({

    name: "",

    username: "",

  });

HERE, IN ORDER  TO TRACK CHANGES,

WE USE event.target.name and event.target.value  

WE NEED TO FIND THE FIELD NAME FROM FORMDATA AND ASSIGN NEW VALUE TO IT.

AS WE ARE DEALING WITH OBJECTS, WE NEED TO MAKE A COPY AND DECONSTRUCT IT TO MAKE CHANGES IN THE STATE VARIABLE.

INSTEAD OF USING {...OBJ} , WE USE [ VARIABLE ]

WRITING A VARIABLE INSIDE SQUARE BRACKETS MEANS IT'S A COMPUTED PROPERTY NAME.

IT INDICATES THAT WE DONOT EXACTLY KNOW THE PROPERTY'S NAME , BUT WE HAVE A VARIABLE THAT CONSISTS OF THAT PROPERTY.

SO, WHENEVER WE WANT TO ACCESS AN OBJECT'S PROPERTY WE USE THE COMPUTED PROPERTY NAME.

let handleInput = (event) => {

    let fieldName = event.target.name;

    let newValue = event.target.value;

    setFormData((currData) => {

      currData[fieldName] = newValue;

      return { ...currData };

    });

WE CAN ALSO WRITE THESE LINES AS ,

      return { ...currData , [event.target.name]:event.target.value};

AS SOON AS THE FORM IS SUBMITTED, ENTIRE DATA DISAPPEARS (DEFAULT)

TO HANDLE THIS, WE PREVENT DEFAULT FEATURESOF FORM,

  let handleSubmit = (event) => {

    event.preventDefault();

    console.log(formData);

    setFormData({

      name: "",

      username: "",

    });

  };

import { useState } from "react";

export default function Form() {

  let [formData, setFormData] = useState({

    name: "",

    username: "",

  });

 

  let handleInput = (event) => {

    // let fieldName = event.target.name;

    // let newValue = event.target.value;

    setFormData((currData) => {

     

      return { ...currData , [event.target.name]:event.target.value};

    });

    // console.log(fieldName);

    // // console.log(newValue);

  };

  let handleSubmit = (event) => {

    event.preventDefault();

    console.log(formData);

    setFormData({

      name: "",

      username: "",

    });

  };

  return (

    <form onSubmit={handleSubmit}>

      <label htmlFor="name">Name:</label>

      <input

        placeholder="enter name"

        value={formData.name}

        onChange={handleInput}

        id="name"

        type="text"

        name="name"

      />

      <br />

      <br />

      <br />

      <br />

      <label htmlFor="username">UserName:</label>

      <input

        placeholder="enter username"

        value={formData.username}

        onChange={handleInput}

        id="username"

        type="text"

        name="username"

      />

      <button>submit</button>

    </form>

  );

}