iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To build an Indian state-and-district form in React, store the selected state and district separately, derive the district options from the selected state, and clear the district whenever the state changes. A state-keyed JSON object works for a small form; for real addresses, choose a maintained data file and verify its contents against an authoritative reference before calling it current.
How the dependent dropdown works
The state is the parent selection; the district is its child. The child options are derived from the parent’s current value rather than stored as a second copy of the dataset. When the parent changes, clear the child selection so the form cannot submit a district belonging to the previous state.
React controlled selects receive their selected value through value. Their onChange handlers should synchronously update the state that backs that value. Each select also needs a meaningful associated label, and each option needs a value. See React’s select documentation.
Build the React component
This example expects an object keyed by state or union-territory names, with each value an array of district names. The sample data is deliberately abbreviated: use a maintained dataset for the complete list.
#1 Best Overall
import { useState } from 'react';
const exampleDistrictsByState = {
Maharashtra: ['Mumbai City', 'Pune'],
'Tamil Nadu': ['Chennai', 'Coimbatore'],
};
export function StateDistrictFields({
districtsByState = exampleDistrictsByState,
}) {
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"
name="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"
name="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>
</>
);
}Why the reset belongs in the state handler
districts is calculated from state, so changing the parent immediately changes the available child options. Calling setDistrict('') in the same handler removes any previous selection. The district select is disabled until a state is selected, and both selects include an empty prompt option whose value represents no selection.
Use stable codes when the data provides them
The abbreviated example uses names as keys and option values for readability. If the dataset supplies state and district codes, use those stable machine-oriented codes as option values and lookup keys, while rendering the human-readable names as labels. This avoids making stored form values depend on display spelling. If reusable component instances need generated label IDs, React recommends useId; otherwise, give each label and select a matching, unique htmlFor and id.
Choose and validate the India dataset
A convenient JSON file is not automatically an authoritative or current reference. The Government of India’s Integrated Government Online Directory describes itself as the official government website directory, maintained by NIC under the Ministry of Electronics & Information Technology. Its state/UT-wise district directory is a useful reference for checking the names and membership in an application’s dataset. The directory pages were reported as last updated on 5 October 2026; that date describes those pages, not the update date of any third-party JSON file. For background, see the directory’s about page.
The CodingMation India states and districts repository provides JSON variants and examples organized around state codes, including lookup by a code such as MH. Its README describes the dataset as complete and up-to-date, but that is the repository’s claim: a row-by-row match against the government directory and a maintenance cadence are not established here. Treat it as a convenient community dataset, not government-approved or independently validated data.
The repository README lists approximate file sizes of 84 KB for readable JSON, 43 KB for medium JSON, and 32 KB for minified JSON. Those are repository-published figures, not independent measurements. Choose a variant based on whether readability or transfer size matters more, and check the actual file and its license before using it in a project.
Validation checklist
- Confirm that the file covers the states and union territories your form needs.
- Compare state and district names and membership with the government directory before describing the data as current.
- Check for codes and use them as values when available; keep names for display.
- Inspect the repository’s license and update history. A published file size or claim of completeness does not establish freshness or permitted use.
- For a dataset that changes over time, record the source and review it periodically rather than assuming a one-time download stays current.
Load the JSON and adapt the lookup
For a small, stable form, import the JSON into the application and pass it to StateDistrictFields as districtsByState. If you host or fetch the file separately, load it before rendering the choices and handle loading or request errors in the surrounding form. Keep the component’s lookup shape consistent with the file.
The sample expects {"Maharashtra":["Mumbai City","Pune"]}. A code-keyed source needs a different lookup: store the selected state code, index the district data with that code, and render the state’s name separately. Do not try to index code-keyed data using a display name. The repository’s README demonstrates a code-oriented approach; check the actual JSON variant you select before adapting the component.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Common mistakes to avoid
- Leaving the child selected after a parent change: reset the district in the state change handler.
- Using an uncontrolled select accidentally: if you set
value, provide anonChangehandler that updates its backing state. - Using mismatched keys: ensure the selected state’s value is the same kind of key used in the dataset—either a name or a code.
- Shipping a sample as a complete list: the small arrays above illustrate the component only; they are not a full India dataset.
- Calling community data official or current without verification: check the actual entries against the government directory and identify the source you rely on.
When to use a package
A package can supply reusable country, state, and city selector behavior, but its existence does not establish that it contains a current India-specific district list. For example, the react-country-state-dropdown documentation describes dependent fields and externally hosted JSON; verify the data separately if you use that approach. For just two fields, ordinary React state and a validated JSON object are enough.
Quick Recap
Best Value
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.
