React Forms

Forms are a key part of web applications — they allow users to input data.
In React, forms work differently from regular HTML because React controls the UI using state.

📌 Controlled Components

A form element (like <input>, <textarea>, <select>) whose value is controlled by React using state is called a controlled component.

Example:

import { useState } from "react";

function MyForm() {
const [name, setName] = useState("");

const handleSubmit = (event) => {
event.preventDefault();
alert("You entered: " + name);
};

return (
<form onSubmit={handleSubmit}>
<label>Enter your name:</label>
<input
type="text"
value={name}
onChange={(event) => setName(event.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}

import { useState } from "react";

function MyForm() {

const [name, setName] = useState("");

const handleSubmit = (event) => {

event.preventDefault();

alert("You entered: " + name);

};

return (

<label>Enter your name:</label>

<input

type="text"

value={name}

onChange={(event) => setName(event.target.value)}

<button type="submit">Submit</button>

</form>

);

}

export default MyForm;

📌 Multiple Inputs

You can store multiple form field values using an object:

import { useState } from "react";

function MyForm() {
const [formData, setFormData] = useState({ username: "", age: "" });

const handleChange = (event) => {
const { name, value } = event.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};

return (
<>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Enter Username"
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
placeholder="Enter Age"
/>
<p>
Username: {formData.username}, Age: {formData.age}
</p>
</>
);
}

import { useState } from "react";

function MyForm() {

const [formData, setFormData] = useState({ username: "", age: "" });

const handleChange = (event) => {

const { name, value } = event.target;

setFormData((prev) => ({ ...prev, [name]: value }));

};

return (

<input

type="text"

name="username"

value={formData.username}

onChange={handleChange}

placeholder="Enter Username"

<input

type="number"

name="age"

value={formData.age}

onChange={handleChange}

placeholder="Enter Age"

<p>

Username: {formData.username}, Age: {formData.age}

</p>

</>

);

}

export default MyForm;

📌 Textarea Example

📌 Select Dropdown Example

function MyForm() {
const [car, setCar] = useState("BMW");

return (
<select value={car} onChange={(e) => setCar(e.target.value)}>
<option value="BMW">BMW</option>
<option value="Audi">Audi</option>
<option value="Tesla">Tesla</option>
</select>
);
}

function MyForm() {

const [car, setCar] = useState("BMW");

return (

<select value={car} onChange={(e) => setCar(e.target.value)}>

<option value="Tesla">Tesla</option>

</select>

);

}

📌 Form Submit Handler

To prevent page reload:

📌 Summary

Feature	Description
Controlled Components	React controls form element values using state
`onChange` Event	Updates state when input changes
`onSubmit` Event	Handles form submission
Multiple Inputs	Use object state + dynamic keys

React Forms

React Forms

📌 Controlled Components

Example:

📌 Multiple Inputs

📌 Textarea Example

📌 Select Dropdown Example

📌 Form Submit Handler

📌 Summary

You may also like...

React Tutorial

React Hook

React Forms

React Forms

📌 Controlled Components

Example:

📌 Multiple Inputs

📌 Textarea Example

📌 Select Dropdown Example

📌 Form Submit Handler

📌 Summary

You may also like...

React CSS Modules

React Portals

React Destructuring Props

React Tutorial

React Hook