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

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!