Introduction
Forms React applications ka important part hain. Login, registration, contact, search aur feedback jaise features mein forms ka use hota hai. React mein form inputs ko state ke saath manage karke user ke entered data ko track kiya ja sakta hai. Is chapter mein hum text inputs, onChange, onSubmit, form submission, multiple inputs, textarea, select aur practical form handling ke solved questions dekhenge. React js Forms practice questions with solutions help to build concepts.
1. What are Forms in React?
Answer:
Forms ka use React application mein user se information collect karne ke liye hota hai.
Examples:
- Login form
- Registration form
- Contact form
- Feedback form
- Search form
- Course enquiry form
Simple React form:
function App() {
return (
<form>
<label>Name:</label>
<input type="text" />
<button type="submit">Submit</button>
</form>
);
}
export default App;
Yahan <form>, <input> aur <button> HTML form elements hain jo React component ke andar use kiye gaye hain.
2. How do you create a text input in React?
Answer:
React mein normal HTML input element use karke text input create kar sakte hain.
function App() {
return (
<div>
<label>Username:</label>
<input
type="text"
placeholder="Enter your username"
/>
</div>
);
}
export default App;
User input field mein apna username enter kar sakta hai.
Lekin agar humein input ki value React mein track karni hai, toh state aur onChange ka use karna useful hota hai.
3. How do you handle input values using useState()?
Answer:
Input value ko state mein store kar sakte hain.
import { useState } from "react";
function App() {
const [name, setName] = useState("");
return (
<div>
<input
type="text"
value={name}
onChange={(event) => setName(event.target.value)}
/>
<p>Your name: {name}</p>
</div>
);
}
export default App;
Yahan:
value={name}
input ki current value ko state se connect karta hai.
Aur:
onChange={(event) => setName(event.target.value)}
user ke input ko state mein update karta hai.
4. What is onChange in React Forms?
Answer:
onChange event tab trigger hota hai jab form input ki value change hoti hai.
Example:
import { useState } from "react";
function App() {
const [email, setEmail] = useState("");
return (
<div>
<input
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
<p>{email}</p>
</div>
);
}
export default App;
Jab user email type karega, onChange handler run hoga aur:
setEmail(event.target.value)
state ko update karega.
5. How do you handle form submission in React?
Answer:
Form submit karne ke liye onSubmit event use kiya ja sakta hai.
Example:
function App() {
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted");
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Enter your name"
/>
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
Yahan:
onSubmit={handleSubmit}
form submit hone par function run karta hai.
event.preventDefault() browser ke default form submission behavior ko prevent karta hai, jisse React application page reload ke bina submission ko handle kar sakti hai.
6. How do you create a controlled input in React?
Answer:
Jab React state input ki value ko control karti hai, usse controlled input kaha jata hai.
Example:
import { useState } from "react";
function App() {
const [username, setUsername] = useState("");
return (
<form>
<label>Username:</label>
<input
type="text"
value={username}
onChange={(event) => setUsername(event.target.value)}
/>
<p>Username: {username}</p>
</form>
);
}
export default App;
Is example mein:
value={username}
React state ko input ke current value ke saath connect karta hai.
Aur:
onChange={(event) => setUsername(event.target.value)}
user ke changes ko state mein save karta hai.
Controlled components ko next chapter Controlled Components mein detail mein cover kiya jayega.
7. How do you create a form with multiple input fields?
Answer:
Ek form mein multiple fields ho sakti hain, jaise name, email aur phone.
Example:
import { useState } from "react";
function App() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
function handleSubmit(event) {
event.preventDefault();
console.log(name);
console.log(email);
console.log(phone);
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Name"
value={name}
onChange={(event) => setName(event.target.value)}
/>
<input
type="email"
placeholder="Email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
<input
type="tel"
placeholder="Phone"
value={phone}
onChange={(event) => setPhone(event.target.value)}
/>
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
Yahan har input ki apni state hai.
Form submit hone par teeno values access ki ja sakti hain.
8. How do you handle a textarea in React?
Answer:
React mein <textarea> ko bhi state ke saath handle kar sakte hain.
Example:
import { useState } from "react";
function App() {
const [message, setMessage] = useState("");
return (
<div>
<label>Message:</label>
<textarea
value={message}
onChange={(event) => setMessage(event.target.value)}
placeholder="Enter your message"
/>
<p>Message: {message}</p>
</div>
);
}
export default App;
Yahan textarea ki value message state mein store ho rahi hai.
Jab user message type karta hai, onChange state ko update karta hai.
9. How do you create a select dropdown in React?
Answer:
React mein dropdown ke liye <select> aur <option> elements use kar sakte hain.
Example:
import { useState } from "react";
function App() {
const [course, setCourse] = useState("");
return (
<div>
<label>Select Course:</label>
<select
value={course}
onChange={(event) => setCourse(event.target.value)}
>
<option value="">Select</option>
<option value="react">React.js</option>
<option value="python">Python</option>
<option value="node">Node.js</option>
</select>
<p>Selected Course: {course}</p>
</div>
);
}
export default App;
Jab user dropdown se course select karta hai, selected value course state mein store ho jati hai.
10. Build a practical Student Registration Form in React.
Answer:
Ab ek practical Student Registration Form banate hain jisme name, email aur course select karne ka option hoga.
import { useState } from "react";
function StudentForm() {
const [formData, setFormData] = useState({
name: "",
email: "",
course: ""
});
function handleChange(event) {
const { name, value } = event.target;
setFormData((previousData) => ({
...previousData,
[name]: value
}));
}
function handleSubmit(event) {
event.preventDefault();
console.log("Student Data:", formData);
}
return (
<form onSubmit={handleSubmit}>
<h2>Student Registration</h2>
<input
type="text"
name="name"
placeholder="Enter your name"
value={formData.name}
onChange={handleChange}
/>
<br />
<br />
<input
type="email"
name="email"
placeholder="Enter your email"
value={formData.email}
onChange={handleChange}
/>
<br />
<br />
<select
name="course"
value={formData.course}
onChange={handleChange}
>
<option value="">Select Course</option>
<option value="react">React.js</option>
<option value="python">Python</option>
<option value="node">Node.js</option>
</select>
<br />
<br />
<button type="submit">
Register
</button>
</form>
);
}
export default StudentForm;
How this works:
Form data ek object mein store hai:
const [formData, setFormData] = useState({
name: "",
email: "",
course: ""
});
Common handleChange() function input ka name aur value read karta hai:
const { name, value } = event.target;
Then object ke corresponding field ko update karta hai:
setFormData((previousData) => ({
...previousData,
[name]: value
}));
Finally, handleSubmit() form submission ko handle karta hai:
function handleSubmit(event) {
event.preventDefault();
console.log(formData);
}
Ye approach multiple form fields ko manage karne ke liye practical hai.
Key Takeaways
- React mein forms user input collect karne ke liye use hote hain.
- Common form elements mein
input,textarea,selectaurbuttoninclude hote hain. useState()ke through input values ko track kiya ja sakta hai.onChangeinput value change hone par run hota hai.onSubmitform submission handle karta hai.event.preventDefault()browser ke default form submission behavior ko prevent karta hai.- Controlled inputs mein React state input ki value ko control karti hai.
- Multiple fields ko separate states ya ek form-data object se manage kiya ja sakta hai.
<select>dropdown ko bhi state ke saath control kiya ja sakta hai.- Practical React forms mein user registration, login, contact aur enquiry forms common examples hain.
FAQs
1. What are Forms in React?
Forms in React are used to collect and manage user input such as names, emails, passwords, messages, and selections.
2. Which event is used to handle input changes in React?
The onChange event is commonly used to detect changes in form inputs.
3. Which event is used to handle form submission?
The onSubmit event is commonly used to handle form submission in React.
4. Why is event.preventDefault() used in React forms?
It prevents the browser’s default form submission behavior, allowing the React application to handle the submission itself.
5. What is a controlled input in React?
A controlled input is a form input whose current value is controlled by React state.
6. Can React handle multiple form fields?
Yes. Multiple form fields can be managed using separate state variables or a single object containing the form data.
7. Can select and textarea be controlled in React?
Yes. Both <select> and <textarea> can be controlled using state, value, and onChange.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
