Controlled Components
In React, there are two ways to handle form inputs: controlled and uncontrolled components. **Controlled components** are the React way of doing things where React state becomes the "single source of truth" for the input.
What is a Controlled Component?
In a controlled component, the form input's value is controlled by React state. The input's `value` prop is set to a state variable, and the `onChange` handler updates that state. This means React is always in sync with what the user sees.
In a controlled component, form data is handled by the React component, not the DOM. The React state is the "single source of truth.
Basic Controlled Input
function ControlledInput() { const [text setText] = useState('');
function handleChange(event) { setText(event.target.value); }
return ( <div> <input type=""text"" value={text} onChange={handleChange} placeholder=""Type something..."" /> <p>You typed: {text}</p> </div> );}Every keystroke calls `handleChange` which updates the state. The new state causes a re-render and the input displays the updated value.
Controlled Textarea
function ControlledTextarea() { const [message setMessage] = useState('');
return ( <div> <textarea value={message} onChange={(e) => setMessage(e.target.value)} rows={4} cols={50} placeholder=""Enter your message..."" /> <p>Message length: {message.length}</p> </div> );}Controlled Select
function ControlledSelect() { const [selectedFruit setSelectedFruit] = useState('apple');
return ( <div> <select value={selectedFruit} onChange={(e) => setSelectedFruit(e.target.value)} > <option value=""apple"">Apple</option> <option value=""banana"">Banana</option> <option value=""orange"">Orange</option> </select> <p>You selected: {selectedFruit}</p> </div> );}Controlled Checkbox
function ControlledCheckbox() { const [isChecked setIsChecked] = useState(false);
return ( <label> <input type=""checkbox"" checked={isChecked} onChange={(e) => setIsChecked(e.target.checked)} /> Accept terms and conditions </label> );}Controlled Radio Buttons
function ControlledRadio() { const [selectedSize setSelectedSize] = useState('M');
return ( <div> <label> <input type=""radio"" name=""size"" value=""S"" checked={selectedSize === 'S'} onChange={(e) => setSelectedSize(e.target.value)} /> Small </label> <label> <input type=""radio"" name=""size"" value=""M"" checked={selectedSize === 'M'} onChange={(e) => setSelectedSize(e.target.value)} /> Medium </label> <label> <input type=""radio"" name=""size"" value=""L"" checked={selectedSize === 'L'} onChange={(e) => setSelectedSize(e.target.value)} /> Large </label> <p>Selected size: {selectedSize}</p> </div> );}Two Minute Drill
- Controlled components store form data in React state not in the DOM.
- The input's `value` prop is set to a state variable and `onChange` updates that state.
- For checkboxes and radio buttons use the `checked` prop instead of `value`.
- Controlled components give you instant access to input values for validation formatting or live previews.
- They are the recommended way to handle forms in React because React stays in sync with the UI.
Need more clarification?
Drop us an email at career@quipoinfotech.com