How to build an Indian State & District Dependent Dropdown in React (Clean JSON Dataset)

CodingMation — Thu, 10 Sep 2026 15:21:44 +0000

Building web forms in React often requires asking users for their Indian State and District. Creating dependent dropdowns can be frustrating when you don't have a clean, up-to-date dataset.

To solve this, I created a lightweight, open-source dataset containing all Indian States, Union Territories, and their corresponding districts.

🔗 GitHub Repository

👉 https://github.com/CodingMation/indian-states-districts

🔗 WebSite

👉 https://codingmation.github.io/indian-states-districts

🚀 How to fetch it directly into your app (No local file needed)

You can fetch the data dynamically using the raw GitHub URL:


javascript
fetch("[https://raw.githubusercontent.com/CodingMation/indian-states-districts/main/states-districts.json](https://raw.githubusercontent.com/CodingMation/indian-states-districts/main/states-districts.json)")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error("Error fetching data:", err));



Quick React Implementation Example
Here is how you can use this JSON dataset to create a dependent State-District selector in React:

JavaScript


import React, { useState, useEffect } from "react";

export default function LocationSelector() {
  const [data, setData] = useState([]);
  const [selectedState, setSelectedState] = useState("");
  const [districts, setDistricts] = useState([]);

  useEffect(() => {
    fetch("[https://raw.githubusercontent.com/CodingMation/indian-states-districts/main/states-districts.json](https://raw.githubusercontent.com/CodingMation/indian-states-districts/main/states-districts.json)")
      .then((res) => res.json())
      .then((jsonData) => setData(jsonData));
  }, []);

  const handleStateChange = (e) => {
    const stateName = e.target.value;
    setSelectedState(stateName);

    const matchedState = data.find((item) => item.state === stateName);
    setDistricts(matchedState ? matchedState.districts : []);
  };

  return (
    <div style={{ display: "flex", gap: "10px" }}>
      {/* State Dropdown */}
      <select onChange={handleStateChange} value={selectedState}>
        <option value="">Select State</option>
        {data.map((item) => (
          <option key={item.state} value={item.state}>
            {item.state}
          </option>
        ))}
      </select>

      {/* District Dropdown */}
      <select disabled={!selectedState}>
        <option value="">Select District</option>
        {districts.map((district) => (
          <option key={district} value={district}>
            {district}
          </option>
        ))}
      </select>
    </div>
  );
}
🤝 Contributions & Feedback
If you find missing districts or want CSV/SQL formats added to the dataset, feel free to star the repo or open an issue on GitHub!

DEV Community: CodingMation

How to build an Indian State & District Dependent Dropdown in React (Clean JSON Dataset)

🔗 GitHub Repository

🔗 WebSite

🚀 How to fetch it directly into your app (No local file needed)