Neeraj Maurya
  2 Feb 23

HTML forms allow users to enter data into input fields that accept text, passwords, emails, numbers, colors, phone numbers, dates, and more. Once all inputs have been collected, the form can be submitted for further processing using the submit button.

React Form

HTML form elements maintain their own state. Updating this state property is only possible through the setState() method.

The React in-built hook, useState() makes it easier to manage.

Good programming practice is to treat React’s state as the only source of truth. A React component with a form inside must handle everything that happens to the form when its

React Form Code

import { useEffect, useState } from "react";

import "./styles.css";




export default function App() {

  const [state, setState] = useState({

    firstName: "",

    lastName: "",

    email: "",

    password: "",

    address: "",

    checkMe: false,

    state: ""

  });

  const handleChange = (evt) => {

    const name = evt.target.name;

    const value =

      evt.target.type === "checkbox" ? evt.target.checked :                   evt.target.value;

    setState((prevState) => ({ ...prevState, [name]: value }));

  };

  useEffect(() => {

    console.log(state);

  }, [state]);




  return (

    <>

      <div>

        <label>Full Name</label>

        <input

          type="text"

          name="firstName"

          value={state.firstName}

          onChange= {handleChange}

        />

      </div>

      <div>

        <label>Last Name</label>

        <input

          type="text"

          name="lastName"

          value={state.lastName}

          onChange={handleChange}

        />

      </div>

      <div>

        <label>Email</label>

        <input

          type="text"

          name="email"

          value={state.email}

          onChange={handleChange}

        />

      </div>

      <div>

        <label>Password</label>

        <input

          type="password"

          name="password"

          value={state.password}

          onChange={handleChange}

        />

      </div>

      <div>

        <label>State</label>

        <select name="state" onChange={handleChange} value={state.state}>

          <option>jaunpur</option>

          <option>Allahabad</option>

          <option>Prayagraj</option>

        </select>

      </div>

      <div>

        <label>Address</label>

        <input

          type="text"

          name="address"

          value={state.address}

          onChange={handleChange}

        />

      </div>

      <div>

        <label>Check Me</label>

        <input

          type="checkbox"

          name="checkMe"

          value={state.checkMe}

          onChange={handleChange}

        />

      </div>

    </>

  );

}