React forms are similar to HTML forms but provide more flexibility and control by using state and event handlers. This guide will show you how to handle forms in React with practical examples.
In React, you can create forms just like you would in HTML:
function MyForm() {
return (
<form>
<label>
Enter your name:
<input type="text" />
</label>
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
This form works, but when you submit it, the page refreshes. In React, we usually prevent this behavior and let React handle the form submission.
A controlled component in React is an input element whose value is controlled by React state. You can use the useState Hook to track the input’s value and provide a "single source of truth."
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>
Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
You can handle the form submission by using the onSubmit event and preventing the default browser behavior.
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(`You entered: ${name}`);
};
return (
<form onSubmit={handleSubmit}>
<label>
Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
To handle multiple input fields, initialize your state as an object. Use the name attribute on each input field to identify it and update the state dynamically.
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (e) => {
const { name, value } = e.target;
setInputs((prev) => ({ ...prev, [name]: value }));
};
const handleSubmit = (e) => {
e.preventDefault();
alert(JSON.stringify(inputs));
};
return (
<form onSubmit={handleSubmit}>
<label>
Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>
Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
In React, the value of a <textarea> is set using the value attribute instead of placing content between the tags.
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [textarea, setTextarea] = useState("Default content");
const handleChange = (e) => {
setTextarea(e.target.value);
};
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
In React, the selected value of a <select> is controlled using the value attribute.
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [selectedCar, setSelectedCar] = useState("Toyota");
const handleChange = (e) => {
setSelectedCar(e.target.value);
};
return (
<form>
<select value={selectedCar} onChange={handleChange}>
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
<option value="Ford">Ford</option>
</select>
</form>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyForm />);
Use Controlled Components: Keep input values in React state for better control.
Dynamic State Updates: Use dynamic property keys (e.g., [name]) for multiple inputs.
Handle Submissions Gracefully: Prevent default behavior and handle data programmatically.
React forms give you fine-grained control over input elements using state and event handlers. Whether you're working with a single input, multiple fields, or complex form elements like <textarea> and <select>, React makes managing form data straightforward.
Try these examples to master form handling in React!
The complete source code for this project is available on GitHub