React — Controlled Components

What are Controlled Components?

Controlled components are form elements whose values are controlled by React state. The value is set via state and updated via event handlers.

Basic Controlled Input

function ControlledInput() {
    const [value, setValue] = useState('');

    return (
        <input
            type="text"
            value={value}
            onChange={(e) => setValue(e.target.value)}
        />
    );
}

Controlled Textarea

function ControlledTextarea() {
    const [value, setValue] = useState('');

    return (
        <textarea
            value={value}
            onChange={(e) => setValue(e.target.value)}
        />
    );
}

Controlled Select

function ControlledSelect() {
    const [value, setValue] = useState('apple');

    return (
        <select
            value={value}
            onChange={(e) => setValue(e.target.value)}
        >
            <option value="apple">Apple</option>
            <option value="banana">Banana</option>
            <option value="orange">Orange</option>
        </select>
    );
}

Multiple Controlled Inputs

function ControlledForm() {
    const [formData, setFormData] = useState({
        firstName: '',
        lastName: '',
        email: ''
    });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    return (
        <form>
            <input
                name="firstName"
                value={formData.firstName}
                onChange={handleChange}
                placeholder="First Name"
            />
            <input
                name="lastName"
                value={formData.lastName}
                onChange={handleChange}
                placeholder="Last Name"
            />
            <input
                name="email"
                type="email"
                value={formData.email}
                onChange={handleChange}
                placeholder="Email"
            />
            <p>Hello, {formData.firstName} {formData.lastName}!</p>
        </form>
    );
}

Controlled Checkbox and Radio

function ControlledCheckbox() {
    const [isChecked, setIsChecked] = useState(false);

    return (
        <label>
            <input
                type="checkbox"
                checked={isChecked}
                onChange={(e) => setIsChecked(e.target.checked)}
            />
            I agree to the terms
        </label>
    );
}

function ControlledRadio() {
    const [selected, setSelected] = useState('option1');

    return (
        <div>
            <label>
                <input
                    type="radio"
                    value="option1"
                    checked={selected === 'option1'}
                    onChange={(e) => setSelected(e.target.value)}
                />
                Option 1
            </label>
            <label>
                <input
                    type="radio"
                    value="option2"
                    checked={selected === 'option2'}
                    onChange={(e) => setSelected(e.target.value)}
                />
                Option 2
            </label>
        </div>
    );
}

Mini Practice

Write React code that:

1. Creates a controlled input
2. Creates a controlled textarea
3. Creates a controlled select
4. Uses controlled checkbox and radio

Up Next

Next: Learn about Hooks.