React js Controlled Components Practice Questions with Solutions

By /

Introduction

In React, Controlled Components are form elements whose current values are controlled through React state. The input value comes from the state, and the state is updated using the onChange event. This approach keeps form data under React’s control, making it easier to handle validation, conditional UI, and form submission. In this chapter, we will solve practical examples of controlled inputs. React js Controlled Components practice questions help to build concepts.

1. What is a Controlled Component in React?

Answer:

Controlled Component ek form element hota hai jiska value React state control karti hai.

Example:

import { useState } from "react";

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

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />

      <p>Name: {name}</p>
    </div>
  );
}

export default App;

Yahan:

value={name}

input ko React state se connect karta hai.

Aur:

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

user ke changes ko state mein update karta hai.

Isliye ye input controlled input hai.

2. How does a Controlled Input work in React?

Answer:

Controlled input mein ek simple flow hota hai:

User types
    ↓
onChange runs
    ↓
State updates
    ↓
Component re-renders
    ↓
Input receives updated value

Example:

import { useState } from "react";

function App() {
  const [email, setEmail] = useState("");

  function handleChange(event) {
    setEmail(event.target.value);
  }

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={handleChange}
      />

      <p>{email}</p>
    </div>
  );
}

export default App;

Jab user email type karta hai, handleChange() state update karta hai.

3. How do you create a Controlled Text Input?

Answer:

Text input ko useState, value aur onChange ke saath controlled bana sakte hain.

import { useState } from "react";

function App() {
  const [username, setUsername] = useState("");

  return (
    <div>
      <label>Username:</label>

      <input
        type="text"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
      />

      <p>Username: {username}</p>
    </div>
  );
}

export default App;

Yahan React state username input ki current value ko control kar rahi hai.

Agar user "Rahul" type karta hai, state bhi "Rahul" ho jayegi.

4. How do you handle multiple Controlled Inputs?

Answer:

Multiple form fields ko ek object state mein manage karna practical approach hai.

Example:

import { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: ""
  });

  function handleChange(event) {
    const { name, value } = event.target;

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

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Name"
      />

      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />

      <input
        type="tel"
        name="phone"
        value={formData.phone}
        onChange={handleChange}
        placeholder="Phone"
      />
    </form>
  );
}

export default App;

Yahan ek hi handleChange() function multiple inputs handle kar raha hai.

Important part:

[name]: value

Ye dynamically correct field ko update karta hai.

5. How do you create a Controlled Textarea?

Answer:

textarea ko bhi React state ke through control kiya ja sakta hai.

import { useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  return (
    <div>
      <textarea
        value={message}
        onChange={(event) => setMessage(event.target.value)}
        placeholder="Write your message"
      />

      <p>Message: {message}</p>
    </div>
  );
}

export default App;

Yahan:

value={message}

textarea ko state ke saath connect karta hai.

Aur onChange state ko update karta hai.

6. How do you create a Controlled Select Dropdown?

Answer:

select element ko bhi controlled component banaya ja sakta hai.

import { useState } from "react";

function App() {
  const [course, setCourse] = useState("");

  return (
    <div>
      <label>Choose Course:</label>

      <select
        value={course}
        onChange={(event) => setCourse(event.target.value)}
      >
        <option value="">Select Course</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;

User jab koi course select karta hai, selected value course state mein store hoti hai.

7. How do you handle a Controlled Checkbox?

Answer:

Checkbox ke liye checked property use ki jati hai.

Example:

import { useState } from "react";

function App() {
  const [isAgreed, setIsAgreed] = useState(false);

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isAgreed}
          onChange={(event) => setIsAgreed(event.target.checked)}
        />

        I agree to the terms
      </label>

      <p>
        Status: {isAgreed ? "Agreed" : "Not Agreed"}
      </p>
    </div>
  );
}

export default App;

Checkbox ke liye:

checked={isAgreed}

use hota hai, jabki text input mein generally:

value={name}

use hota hai.

Checkbox ki current state event.target.checked se milti hai.

8. How do you reset Controlled Inputs?

Answer:

Controlled inputs ko reset karna easy hota hai because unki values React state se connected hoti hain.

Example:

import { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  function handleReset() {
    setName("");
    setEmail("");
  }

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="Name"
      />

      <input
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        placeholder="Email"
      />

      <button type="button" onClick={handleReset}>
        Reset
      </button>
    </div>
  );
}

export default App;

handleReset() mein state values empty string par set kar di gayi hain.

Iske baad inputs bhi empty ho jayenge.

9. How do Controlled Components help with form validation?

Answer:

Controlled components mein input values React state mein available hoti hain, isliye validation logic state ke basis par apply karna easy hota hai.

Example:

import { useState } from "react";

function App() {
  const [email, setEmail] = useState("");

  const isValidEmail = email.includes("@");

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />

      {!isValidEmail && email !== "" && (
        <p>Please enter a valid email.</p>
      )}
    </div>
  );
}

export default App;

Yahan React state mein email available hai, isliye hum uske basis par validation message display kar sakte hain.

Large applications mein validation rules aur libraries aur advanced ho sakti hain, lekin controlled inputs basic form validation ka strong foundation provide karte hain.

10. Build a Practical Controlled Registration Form.

Answer:

Ab ek complete registration form banate hain jisme name, email, course aur terms checkbox controlled components ke through manage honge.

import { useState } from "react";

function RegistrationForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    course: "",
    agreed: false
  });

  function handleChange(event) {
    const { name, value, type, checked } = event.target;

    setFormData((previousData) => ({
      ...previousData,
      [name]: type === "checkbox" ? checked : value
    }));
  }

  function handleSubmit(event) {
    event.preventDefault();

    console.log("Registration Data:", formData);
  }

  function handleReset() {
    setFormData({
      name: "",
      email: "",
      course: "",
      agreed: false
    });
  }

  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="data-analytics">
          Data Analytics
        </option>
      </select>

      <br />
      <br />

      <label>
        <input
          type="checkbox"
          name="agreed"
          checked={formData.agreed}
          onChange={handleChange}
        />

        I agree to the terms.
      </label>

      <br />
      <br />

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

      <button
        type="button"
        onClick={handleReset}
      >
        Reset
      </button>
    </form>
  );
}

export default RegistrationForm;

How this example works:

Form ka complete data ek state object mein stored hai:

const [formData, setFormData] = useState({
  name: "",
  email: "",
  course: "",
  agreed: false
});

Text inputs ke liye value use ho raha hai:

value={formData.name}

Dropdown bhi state se controlled hai:

value={formData.course}

Checkbox ke liye checked use hota hai:

checked={formData.agreed}

Aur handleChange() input type ke according correct value update karta hai.

Is approach se poora form React state ke control mein rehta hai.

Key Takeaways

  • Controlled Components ki value React state control karti hai.
  • Text inputs ke liye commonly value aur onChange use hote hain.
  • Checkbox ke liye checked aur onChange use hote hain.
  • textarea aur select ko bhi controlled components banaya ja sakta hai.
  • Multiple inputs ko ek state object ke through manage karna practical approach hai.
  • event.target.value text-based input ki current value provide karta hai.
  • Checkbox ke liye event.target.checked current checked status provide karta hai.
  • Controlled inputs ko reset karna state update karke easy hota hai.
  • React state mein form data available hone ki wajah se validation logic implement karna easier hota hai.
  • Controlled Components React forms ke important building blocks hain.

FAQs

1. What is a Controlled Component in React?

A Controlled Component is a form element whose current value is controlled by React state.

2. What is used to control a text input in React?

A text input is commonly controlled using value and onChange.

3. How is a checkbox controlled in React?

A checkbox is commonly controlled using the checked property and an onChange handler.

4. Can multiple inputs be controlled using one state object?

Yes. Multiple form fields can be stored in one object state and updated using their name attributes.

5. What is the difference between value and checked?

value is commonly used for text, email, number, and select inputs, while checked is used for checkbox and radio controls.

6. Can Controlled Components be reset?

Yes. You can reset them by changing their React state values back to their initial values.

7. Why are Controlled Components useful?

They keep form data in React state, making it easier to validate, submit, reset, and use the entered data in other UI logic.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top