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.
SOCIAL SHARE CARD GENERATOR