Build dependent (Country–State) dropdowns | Interview Question

Q: Build dependent (Country–State) dropdowns

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React form experience is assumed. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and the output in section 6 was produced by actually running it on React 19.3.1 under StrictMode. ## 1. Why This Even Matters — A Story First Imagine ordering at a restaurant with a nested menu: first you pick a cuisine, then a dish from that cuisine, then a side that goes with the dish. If you change your mind from Italian to Japanese, the waiter must cross out "carbonara" and "garlic bread" at once. A waiter who leaves "carbonara" on a Japanese order, even for a moment, has created an impossible order. Dependent dropdowns are that menu. The data rule is simple: **a low

The problem

Question presented to candidate: "We need an address picker with three dropdowns: Country, then State, then City. Each list depends on the one above and comes from an API. Changing the country must reset the state and city. Make it feel solid: loading states, an empty state for countries without states, and no wrong data if someone changes their mind quickly."

Requirements:

Countries load on mount; states load when a country is chosen; cities load when a state is chosen. All three come from a simulated API with latency.
Changing a level clears every level below it, both the selected value and the option list.
Each select shows a helpful placeholder: "Choose a country first", "Loading states...", "No states for this country", "Select a state". Selects are disabled until their options are ready.
Switching country quickly (a slow request followed by a fast one) must show only the latest country's states.
Lists already fetched are reused from a cache; a summary shows "Selected: City, State, Country".

What a strong answer should cover:

State shape: three selected values plus three option lists, each with a status (idle, loading, ready).
Cascading resets performed together with the change that causes them, not as a chain of reactions that briefly shows inconsistent values.
A stale-response guard per level (request counter or cleanup flag), and why it must also invalidate the levels below.
A promise cache that deduplicates in-flight requests as well as finished ones.
Accessible selects: labels, disabled while loading, aria-busy, and a role="status" summary.

Clarifying questions expected:

"How big are the lists? Do we need search inside a dropdown?"
"Should the selection be restorable from saved data, for example when editing an existing address?"
"What should happen for countries with no states?"

Code / implementation expected: Yes. Three dependent selects with async loading, resets, empty and loading states, a race guard and a cache, demonstrated with a fast country switch.

React
Async
Dropdown

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React form experience is assumed. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and the output in section 6 was produced by actually running it on React 19.3.1 under StrictMode.

1. Why This Even Matters — A Story First

Imagine ordering at a restaurant with a nested menu: first you pick a cuisine, then a dish from that cuisine, then a side that goes with the dish. If you change your mind from Italian to Japanese, the waiter must cross out "carbonara" and "garlic bread" at once. A waiter who leaves "carbonara" on a Japanese order, even for a moment, has created an

The solution is hidden so you can try first

11 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import LocationPicker from "./src/components/LocationPicker";
import "./styles.css";

export default function App() {
  return (
    <main className="page">
      <LocationPicker />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.