Sign in
Skip to solution
mediumMachine Coding

Build dependent (Country–State) dropdowns

1.1k views
01

Understand the problem

Build cascading dropdowns where one selection drives the next.

ReactAsyncDropdown
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Solve in

Building Dependent (Country–State) Dropdowns in React

Mental model: Two selects where the second's options depend on the first. The data is a map country -> states[]. The crucial behaviour: when the country changes, reset the state selection (a stale state from the previous country is the classic bug). The

Solution ready — 2 min read

Classified // press E to declassify

04

React solution

Complete solutionRun Playground
import React from 'react';
import CountryState from './src/CountryState';

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 20 }}>
      <h1>Dependent Dropdowns Demo</h1>
      <CountryState />
    </div>
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 24 of 87 decoded in the Frontend Machine Coding track. One more won't hurt.

Back to track