How to create dependent dropdowns in React?

Question

How to create dependent dropdowns in React?

Answer

Use useState to track selections and dynamically render the second dropdown based on the first selection.

import { useState } from 'react';

function CountryStateDropdown() {
  const countries = {
    India: ['Delhi', 'Mumbai', 'Bangalore'],
    USA: ['New York', 'California', 'Texas'],
  };

  const [country, setCountry] = useState('');
  const [states, setStates] = useState([]);

  const handleCountryChange = (e) => {
    const selected = e.target.value;
    setCountry(selected);
    setStates(countries[selected] || []);
  };

  return (
    <div>
      <select onChange={handleCountryChange}>
        <option value=''>Select Country</option>
        {Object.keys(countries).map((c) => (
          <option key={c}>{c}</option>
        ))}
      </select>

      {states.length > 0 && (
        <select>
          {states.map((s) => (
            <option key={s}>{s}</option>
          ))}
        </select>
      )}
    </div>
  );
}

✅ The second dropdown updates dynamically based on the first selection.

Real-World Example

• Country → State selection
• Category → Sub-category filters
• Car brand → Model lists

Quick Practice

Create three dependent dropdowns (Country → State → City).

Summary

Track selection state and update dependent data dynamically for chained dropdowns.