What are Controlled Components in React?

Controlled components are React components where the input's value is managed by the component's state rather than the DOM. In essence, the component "controls" the input's value, ensuring it always reflects the component's current state.

How Controlled Components Work

1. State Management: The component maintains a state variable to store the input's value.
2. Event Handling: The component listens for input events (like onChange) and updates its state accordingly.
3. Value Synchronization: The component's state is used to set the value attribute of the input element, ensuring the input reflects the current state.

Benefits of Controlled Components

• Data Validation: Controlled components allow for real-time validation of input values, preventing invalid data from being submitted.
• Dynamic Updates: You can dynamically change the input's value based on user interactions or other events.
• Improved User Experience: Controlled components provide a more consistent and predictable user experience, as the input always reflects the current state.

Example: Controlled Input Field

import React, { useState } from 'react';

function ControlledInput() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Input Value: {inputValue}</p>
    </div>
  );
}

export default ControlledInput;

In this example, the inputValue state variable holds the input's value. The handleChange function updates the state when the input value changes. The value attribute of the input element is bound to the inputValue state, ensuring the input always displays the correct value.

Conclusion

Controlled components provide a robust and predictable way to manage input values in React applications. They offer benefits like data validation, dynamic updates, and improved user experience. Understanding controlled components is crucial for building interactive and user-friendly React applications.