*******FORMS IN REACT *******

 IN HTML, THE FORM ELEMENTS  SUCH AS <input>,<button>,<textarea>....etc MAINTAIN THEIR OWN STATE ( INTERNAL STATE) AND UPDATE IT BASED ON THIER UESR INPUT.

INTERNAL STATE HERE DOESNOT REFER TO REACT STATE, IT MEANS THAT THESE ELEMENTS HAVE SOME INTERNAL INFORMATION AND DEFAULT BEHAVIOURS LIKE AS SOON AS A FORM IS SUBMITTED ALL THE INFORMATION DISAPPERS EVEN IF WE WANT TO TRACK THE EVENT ( ONCHANGE, ONCLICK) ON THAT FORM.

HERE, WE WANT THE FORM TO WORK ON REACT STATE AND NOT ON THEIR INTERNAL STATE, WE MAKE REACT AS THE SINGLE SOURCE OF TRUTH.

THE STANDARD WAY WITH FORMS IS TO USE "CONTROLLED COMPONENTS", SO THAT WE MAKE REACT STATE TO BE THE SINGLE SOURCE OF TRUTH.

WHICH MEANS THAT,WE ASSIGN A  STATE WITH EACH <form> THAT INFORMS AND HELPS TO TRACK CHANGES INSIDE THAT FORM.

AN INPUT FORM ELEMENT WHERE VALUE IS CONTROLLED BY REACT IN THE WAY IS CALLED A CONTROLLED COMPONENT.

FORM.JSX

import { useState } from "react";

export default function Form() {

  let [name, setName] = useState("abhi");

  let getChange = (event) => {

    console.log(event.target.value);

  };

  return (

    <form>

      <input placeholder="enter name" value={name} onChange={getChange} />

      <button>submit</button>

    </form>

  );

}

HERE,WE CREATED A STATE VARIABLE name, AND ASSIGNED IT AS VALUE IN INPUT.

WHEN ANY CHANGE IS MADE IT DOES NOT RE-RENDER ON THE WEBPAGE AS IT'S THE DEFAULT PROPERTIES OF INPUT TAG

HENCE WE ADD A setName() FUNCTION.  SO THAT WHENEVER A CHANGE HAPPENS IN THE STATE OF name CHANGES. WHENEVER STATE CHANGES , PAGE RE-RENDERS.

import { useState } from "react";

export default function Form() {

  let [name, setName] = useState("abhi");

  let getChange = (event) => {

    console.log(event.target.value);

    setName(event.target.value);

  };

  return (

    <form>

      <input placeholder="enter name" value={name} onChange={getChange} />

      <button>submit</button>

    </form>

  );

}