Controlled Component in React

 In React, a controlled component is an input element (like <input>, <textarea>, <select>, etc.) whose value is controlled by the component’s state. Instead of letting the input element manage its own state, the parent component is responsible for updating the input’s value whenever the user types something. This makes the input’s behavior predictable and fully controlled by React.

Example of Controlled Component

import React, { useState } from 'react';

function ControlledInput() {

  const [value, setValue] = useState(''); // State to hold the input's value

  const handleChange = (event) => {

    setValue(event.target.value); /

  };

 return (

    <div>

      <label>

        Enter text:

        <input type="text" value={value} onChange={handleChange} />

      </label>

      <p>Current value: {value}</p>

    </div>

  );

}

export default ControlledInput;

Key Points of Controlled Components

1. State-Driven: The component’s state (value in the example) holds the current value of the input.
2. value Prop: The value prop of the <input> is set to value from the component's state, making React control its value.
3. onChange Handler: The onChange event handler updates the component’s state with setValue, so every keystroke triggers a state update.

Benefits of Controlled Components

• Predictability: Since the state controls the input, you know exactly what value will be in the input at any time.
• Validation: Controlled components make it easy to add input validation, as each change is managed by React.
• Centralized State: All input data can be centrally stored and processed in your component's state, simplifying data handling.