Forms are one of the most important parts of any web application. Whether it is a login page, registration form, contact form, or search box, forms help users interact with the application. In React, handling forms is slightly different from plain HTML because React uses state to manage form data.
In this blog, we will learn how forms work in React, how to capture user input, and how to submit form data in a simple and practical way.
What is a Form in React?
A form in React works similarly to an HTML form, but React controls the form data using state. This concept is called a Controlled Component.
In simple words:
- The input value is stored in React state.
- React controls the input field.
- Whenever the user types something, the state updates.
Creating a Simple Form
Let’s create a basic form with a name input field.
import React, { useState } from "react";
function App() {
const [name, setName] = useState("");
return (
<div>
<h1>React Form</h1>
<input
type="text"
placeholder="Enter Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<h2>{name}</h2>
</div>
);
}
export default App;
Understanding the Code
1. useState Hook
const [name, setName] = useState("");
This creates a state variable called name.
- name → stores the input value
- setName → updates the value
2. value Attribute
value={name}
The input field value comes from React state.
3. onChange Event
onChange={(e) => setName(e.target.value)}
Whenever the user types:
- e.target.value gets the input value
- setName() updates the state
This keeps the input field connected with React state.
Handling Form Submission
Now let’s submit the form.
import React, { useState } from "react";
function App() {
const [name, setName] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(`Welcome ${name}`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Enter Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}
export default App;
Why use preventDefault()?
e.preventDefault();
Normally, forms reload the page after submission.
preventDefault() stops the page reload and allows React to handle the form submission smoothly.
Handling Multiple Input Fields
In real projects, forms usually have multiple fields like name, email, and password.
Example:
import React, { useState } from "react";
function App() {
const [formData, setFormData] = useState({
name: "",
email: "",
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
return (
<div>
<input
type="text"
name="name"
placeholder="Enter Name"
onChange={handleChange}
/>
<input
type="email"
name="email"
placeholder="Enter Email"
onChange={handleChange}
/>
<h3>{formData.name}</h3>
<h3>{formData.email}</h3>
</div>
);
}
export default App;
How Multiple Inputs Work
name Attribute
name="email"
The name attribute helps React identify which input field is changing.
Dynamic State Update
[e.target.name]: e.target.value
This dynamically updates the correct field in the state object.
Example:
- If input name is "name" → updates formData.name
- If input name is "email" → updates formData.email
Controlled Components in React
React forms are called Controlled Components because React controls the input values through state.
Benefits
- Easy validation
- Better control over data
- Real-time updates
- Easy form handling
Uncontrolled Components
Sometimes developers use useRef() instead of state to access form values. These are called Uncontrolled Components.
Example:
import React, { useRef } from "react";
function App() {
const inputRef = useRef();
const handleSubmit = () => {
alert(inputRef.current.value);
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleSubmit}>
Submit
</button>
</div>
);
}
export default App;
But in most React applications, controlled components are preferred.
Form Validation Example
Validation helps ensure users enter correct data.
import React, { useState } from "react";
function App() {
const [email, setEmail] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (!email.includes("@")) {
alert("Invalid Email");
} else {
alert("Form Submitted");
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Enter Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}
export default App;
Common Form Events in React
Event Description
onChange Runs when the input value changes
onSubmit Runs when the form submits
onFocus Runs when input gets focus
onBlur Runs when input loses focus
Best Practices for React Forms
- Use controlled components
- Keep the form state organized
- Use meaningful input names
- Validate user input
- Prevent page reload using preventDefault()
Related Links:
Java Design Patterns You Should Learn
Do visit our channel to know more: SevenMentor
Author:-
Sagar Kshirsagar
Sagar Kshirsagar
Expert trainer and consultant at SevenMentor with years of industry experience. Passionate about sharing knowledge and empowering the next generation of tech leaders.