React Form Component – Blog Explanation with Code

This component is a simple user registration form built using React. It shows how to manage form data using state, handle input changes, and perform basic validation.

import { useState } from "react";

function FormValidation() {
  const [userdata, setUserdata] = useState({
    name: "",
    age: "",
    mobile: "",
    email: "",
    dob: "",
    password: ""
  });

  // Handle input change
  function getdata(e) {
    const { name, value } = e.target;

    setUserdata({
      ...userdata,
      [name]: value
    });
  }

  // Validate form
  function validate() {
    const { name, age, mobile, email, dob, password } = userdata;

    if (name && age && mobile && email && dob && password) {
      alert("Submitted successfully...");
    } else {
      alert("Please fill all fields");
    }
  }

  // Handle Enter key submit
  function handlekey(e) {
    if (e.key === "Enter") {
      validate();
    }
  }

  return (
    <div>
      <form onKeyDown={handlekey}>
        <label>Enter your name</label><br />
        <input
          name="name"
          type="text"
          onChange={getdata}
          value={userdata.name}
        /><br />

        <label>Enter your age</label><br />
        <input
          name="age"
          type="text"
          onChange={getdata}
          value={userdata.age}
        /><br />

        <label>Enter your mobile</label><br />
        <input
          name="mobile"
          type="number"
          onChange={getdata}
          value={userdata.mobile}
        /><br />

        <label>Enter your email</label><br />
        <input
          name="email"
          type="email"
          onChange={getdata}
          value={userdata.email}
        /><br />

        <label>Enter your date of birth</label><br />
        <input
          name="dob"
          type="date"
          onChange={getdata}
          value={userdata.dob}
        /><br />

        <label>Create password</label><br />
        <input
          name="password"
          type="password"
          onChange={getdata}
          value={userdata.password}
        /><br />

        <button type="button" onClick={validate}>
          Submit
        </button>
      </form>
    </div>
  );
}

export default FormValidation;

State Management

We store all form fields inside a single state object using useState.

import { useState } from "react";

function FormValidation() {
  const [userdata, setUserdata] = useState({
    name: "",
    age: "",
    mobile: "",
    email: "",
    dob: "",
    password: ""
  });

Handling Input Changes

Each input updates only its own field in the state.

function getdata(inputdata) {
    let data = inputdata.target;

    setUserdata({
      ...userdata,
      [data.name]: data.value
    });
  }

Validation Logic

Before submitting, we check whether all fields are filled.

function validate() {
    let { name, age, mobile, email, dob, password } = userdata;

    if (name && age && mobile && email && dob && password) {
      alert("submitted...");
    } else {
      alert("please fill all fields");
    }
  }

Handling Enter Key

This is used to submit the form using the keyboard (Enter key).

  function handlekey(key) {
    if (key.key === "Enter") {
      validate();
    }
  }

Form UI

All inputs are controlled components connected to state.

return (
    <div>
      <form>
        <label>Enter your name</label><br />
        <input
          name="name"
          type="text"
          onChange={getdata}
          value={userdata.name}
        /><br />

        <label>Enter your age</label><br />
        <input
          name="age"
          type="text"
          onChange={getdata}
          value={userdata.age}
        /><br />

        <label>Enter your mobile</label><br />
        <input
          name="mobile"
          type="number"
          onChange={getdata}
          value={userdata.mobile}
        /><br />

        <label>Enter your email</label><br />
        <input
          name="email"
          type="email"
          onChange={getdata}
          value={userdata.email}
        /><br />

        <label>Enter your date of birth</label><br />
        <input
          name="dob"
          type="date"
          onChange={getdata}
          value={userdata.dob}
        /><br />

        <label>Create password</label><br />
        <input
          name="password"
          type="password"
          onChange={getdata}
          value={userdata.password}
        /><br />

        <button type="button" onClick={validate}>
          Submit
        </button>
      </form>
    </div>
  );
}

export default FormValidation;

Conclusion

This React component demonstrates:

• Controlled form inputs
• State management using useState
• Dynamic field update using input name
• Basic form validation
• Simple user interaction handling

With small improvements, this can be extended into a real-world registration system with backend integration.