π¦ Why Forms Matter in Web Apps
Forms are like the way users talk to your website.
They let people:
- Sign up or log in
- Search for things
- Fill contact details
- Give feedback, and more!
React gives you powerful tools to handle these forms smoothly πͺ
π§ Controlled vs Uncontrolled Forms
Letβs start with the difference between Controlled and Uncontrolled components.
Type | Controlled Form | Uncontrolled Form |
---|---|---|
Data Handling | React controls the form data | The DOM (browser) controls the form |
Easy to Validate? | β Yes | β Tricky |
Use Case | Most common in React apps | Rare cases, like quick demo |
β Controlled Component Example
jsxCopyEditimport { useState } from "react";
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (e) => {
e.preventDefault(); // Prevent page reload
alert(`Hello, ${name}!`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
/>
<button type="submit">Say Hi</button>
</form>
);
}
β Uncontrolled Component Example
jsxCopyEditimport { useRef } from "react";
function UncontrolledForm() {
const inputRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
alert(`Hello, ${inputRef.current.value}!`);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} placeholder="Your name" />
<button type="submit">Submit</button>
</form>
);
}
π§ Use controlled forms for better control and validation.
βοΈ Handling Form Submissions
When a user clicks “Submit”, we often want to:
- Stop the page from reloading
- Validate input
- Send data somewhere (like an API)
Steps:
jsxCopyEditconst handleSubmit = (e) => {
e.preventDefault(); // Stops the page reload
// Add your logic here
};
You can even use console.log
to check what the user typed.
π Adding Validation
Letβs say we want to make sure the user enters a name:
jsxCopyEditconst handleSubmit = (e) => {
e.preventDefault();
if (!name.trim()) {
alert("Please enter a name");
return;
}
alert(`Welcome, ${name}`);
};
You can also:
- Check for emails
- Set minimum password lengths
- Show inline error messages
π Building Bigger Forms
Imagine a form with name, email, and password fields. Here’s a basic structure:
jsxCopyEditconst [form, setForm] = useState({ name: "", email: "", password: "" });
<input
name="email"
value={form.email}
onChange={(e) => setForm({ ...form, [e.target.name]: e.target.value })}
/>
β This method keeps all fields in one object. It’s clean and scalable.
π§ Third-Party Helpers: Formik & React Hook Form
π Formik
Formik simplifies form logic.
bashCopyEditnpm install formik
Example:
jsxCopyEditimport { useFormik } from "formik";
const formik = useFormik({
initialValues: { email: "" },
onSubmit: (values) => alert(JSON.stringify(values)),
});
π§ React Hook Form
It’s fast, small, and easy to use.
bashCopyEditnpm install react-hook-form
Example:
jsxCopyEditimport { useForm } from "react-hook-form";
const { register, handleSubmit } = useForm();
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input {...register("email")} />
<button type="submit">Submit</button>
</form>
π These tools help you save time and write cleaner code.
π§ Controlled vs Uncontrolled β Summary Table
Feature | Controlled | Uncontrolled |
---|---|---|
Recommended? | β Yes | β No |
Data Source | useState | useRef |
Best for | Real apps | Quick demos |
Easy to validate | β Yes | β No |
π Infographic β Form Flow in React

π Conclusion
Forms are super important in React apps.
They help users connect with your site π¬
Remember:
- Use controlled components
- Validate before submit β
- Use Formik or React Hook Form for big forms
π£ Want more awesome React content?
π Subscribe to Web Codder for hands-on tutorials and fun coding projects!
πΊ YouTube: Web Codder
πΈ Instagram: @web_codder_official
π¬ Join us on WhatsApp for updates, tips, and challenges!