What are controlled components in React?

In React, controlled components are components where form data (like input fields) is handled by the component's state rather than being maintained in the DOM. In other words, in a controlled component, the value of an input element is controlled by React through state, making it the single source of truth for form inputs.

Key Concepts:

• Controlled components rely on React’s state to manage the form data.
• Every time a user interacts with a form element (like typing into a text field), the component’s state is updated, which in turn updates the value of the input element.
• This ensures that the form input always reflects the state of the component.

Example: Controlled Input Component

Here’s a simple example of a controlled input field using React:

import React, { useState } from "react";

function ControlledInput() {
  // Defining the state to manage the input value
  const [inputValue, setInputValue] = useState("");

  // Handler for input change
  const handleChange = (e) => {
    setInputValue(e.target.value); // Update state with the input value
  };

  // Rendering the controlled input component
  return (
    <div>
      <h3>Controlled Input Example</h3>
      <input 
        type="text" 
        value={inputValue} // The value is derived from the state
        onChange={handleChange} // When the value changes, update state
      />
      <p>Input Value: {inputValue}</p> {/* Displaying the current value */}
    </div>
  );
}

export default ControlledInput;

Explanation:

1. State Management (useState): The inputValue state is used to manage the current value of the input field.
2. onChange Handler: The handleChange function updates the inputValue state whenever the user types into the input field.
3. Controlled Input: The value attribute of the <input> element is set to inputValue. This makes the input field a controlled component because its value is governed by React’s state.

Output:

When you render this component and type into the input field, the value of the input is immediately reflected on the screen in the <p> tag. Every keypress updates the state and rerenders the component with the updated value.

Advantages of Controlled Components:

1. Single Source of Truth: The form data is kept in the component’s state, making it easier to manage and validate.
2. Validation and Formatting: You can validate and format input data before updating the state, giving you more control over the form behavior.
3. Flexibility: Since state is centralized, you can easily implement features like form validation, auto-completion, and custom formatting.

Example 2: Controlled Checkbox Component

Here’s another example with a checkbox:

import React, { useState } from "react";

function ControlledCheckbox() {
  // Defining the state for checkbox
  const [isChecked, setIsChecked] = useState(false);

  // Handler for checkbox change
  const handleChange = (e) => {
    setIsChecked(e.target.checked); // Update state with the checkbox status
  };

  return (
    <div>
      <h3>Controlled Checkbox Example</h3>
      <label>
        <input
          type="checkbox"
          checked={isChecked} // Checkbox checked state comes from the component's state
          onChange={handleChange} // Updates state when clicked
        />
        Accept Terms and Conditions
      </label>
      <p>Checkbox is {isChecked ? "Checked" : "Unchecked"}</p>
    </div>
  );
}

export default ControlledCheckbox;

Output:

When you check or uncheck the checkbox, the state (isChecked) is updated, and the text below reflects whether the checkbox is currently checked or not.

Conclusion:

Controlled components give you full control over form inputs and are a standard practice in modern React applications for handling form data. By managing input values in the component state, you can ensure that the UI stays consistent with the application's state.