To build dependent state and district dropdowns in React, keep the selected state and district in controlled component state, derive the district options from the selected state, and clear the district whenever the state changes. A state-keyed JSON object makes the lookup simple; the dataset still needs to be checked against an authoritative directory before you describe its entries as current.
How the parent–child selection works
The state is the parent field: its value determines which districts are available. The district is the child field: render its options from the selected state’s entry rather than keeping a separate, potentially out-of-sync list. When a user changes the state, clear the district at the same time. Otherwise, a district selected under the previous state can remain in the form even though it is no longer a valid option.
As an Amazon Associate I earn from qualifying purchases.
React’s controlled <select> uses a value prop and an onChange handler that updates the state behind that value. Each select also needs a meaningful label and each option needs a value. See the React select documentation.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallUse a state-keyed data shape
For a small example, the lookup can be an object whose keys are state or union-territory names and whose values are arrays of district names:
#1 Best Overall
{
"Maharashtra": ["Mumbai City", "Pune"],
"Kerala": ["Ernakulam", "Kozhikode"]
}These entries illustrate the shape only; use a maintained source for the complete list. If your dataset supplies stable codes, use those for lookups and option values, and keep the human-readable names as labels. Names can change in spelling or presentation, whereas codes are generally better suited to machine-facing values when the source provides them.
Build the controlled React fields
The component below assumes that districtsByState is keyed by display name. If your file is keyed by codes, use the selected code for the lookup and option value instead.
import { useState } from 'react';
export function StateDistrictFields({ districtsByState }) {
const [state, setState] = useState('');
const [district, setDistrict] = useState('');
const districts = districtsByState[state] ?? [];
function handleStateChange(event) {
setState(event.target.value);
setDistrict('');
}
return (
<>
<label htmlFor="state">State or union territory</label>
<select id="state" value={state} onChange={handleStateChange}>
<option value="">Select a state or union territory</option>
{Object.keys(districtsByState).map((name) => (
<option key={name} value={name}>{name}</option>
))}
</select>
<label htmlFor="district">District</label>
<select
id="district"
value={district}
onChange={(event) => setDistrict(event.target.value)}
disabled={!state}
>
<option value="">Select a district</option>
{districts.map((name) => (
<option key={name} value={name}>{name}</option>
))}
</select>
</>
);
}Here, districts is derived from the selected state, and the district field is disabled until a state is selected. The state handler updates the parent and clears the child. This is the same cascading principle described in Syncfusion’s cascading dropdown example, implemented with ordinary React state rather than a vendor control.
Recommended Free Tools
Use unique IDs when rendering multiple copies
The example’s fixed IDs work for one instance on a page. If the component can appear more than once, generate unique IDs with React’s useId and use each generated ID in both the corresponding label’s htmlFor and select’s id. This preserves the label association without duplicate IDs.
Choose and verify an Indian states-and-districts dataset
The Government of India’s Integrated Government Online Directory (IGOD) describes itself as the official government website directory and says it is maintained by the National Informatics Centre under the Ministry of Electronics and Information Technology. Its state/UT-wise district listing is a useful authoritative reference. The directory pages reported a last-updated date of 5 October 2026 when consulted; that date describes those pages, not a guarantee that any third-party JSON file matches them.
The CodingMation Indian States & Districts repository offers JSON variants organized around state codes and district lookup. Its README describes the data as complete and up to date, but that is the repository’s claim: the full contents have not been independently reconciled here against the government directory, and the available repository information does not establish an update schedule. Treat it as a convenient community dataset, not as government-approved or independently validated data.
The repository README states approximate sizes of 84 KB for its readable JSON, 43 KB for its medium JSON, and 32 KB for its minified JSON. These are repository-published figures, not independent measurements. Choose a format based on how you will consume it, then verify its entries and licensing for your use before shipping it.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Practical checks before using the file
- Confirm the data includes the states and union territories your form needs.
- Compare the names and district membership with the relevant official directory entries; do not assume a clean JSON structure guarantees current or complete content.
- Check whether your chosen file uses names, codes, or both, and use the same key consistently in lookups and form submission.
- Review the repository’s licensing and maintenance information rather than assuming reuse rights or a refresh cadence.
- Keep the source and a date of verification with your project so you can revisit the data when reference listings change.
State and union-territory names and district membership can change. The available sources establish the official directory as a reference and show a convenient community dataset, but do not establish a row-by-row match between that dataset and the directory.
Best Value
When a package or hosted JSON makes sense
A package may be useful if you need a broader country, state, and city selector or want documented support for externally hosted JSON. For example, the react-country-state-dropdown repository documents those implementation patterns. Its existence does not establish that it supplies a current Indian district dataset; validate the data separately. For only two dependent fields, the controlled component above avoids adding a dropdown library solely for the parent–child behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
