Q139- What are controlled components in React? Write a simple controlled input component.

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

• The state drives the input value, and the input updates the state via an onChange handler.
• This gives full control over form data, validation, and behavior.

---

✅ Simple Controlled Input Example

import React, { useState } from "react";

const ControlledInput = () => {
  const [name, setName] = useState(""); // React state holds input value

  const handleChange = (e) => {
    setName(e.target.value); // Update state on input change
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted Name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name: 
        <input 
          type="text" 
          value={name}      // Input value controlled by state
          onChange={handleChange} 
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledInput;

---

🧩 Explanation:

1. useState holds the current value of the input.
2. value={name} → input reflects React state.
3. onChange={handleChange} → updates state as the user types.
4. Form submission uses current state, not reading the DOM directly.

---

✅ Key Points

• Controlled components let you validate, format, or manipulate input values easily.
• Keeps single source of truth in React state.

---

In short:
A controlled component = React state drives the input, ensuring predictable behavior and easier form management.