GetCity (countryid:Number, stateid:Number)

info

The GetCity function in react-country-state-city fetches a list of city objects based on given country and state id's. The async function returns an array of city objects, each containing details such as name, latitude and longitude.

Usage

import React, { useState, useEffect } from "react";
import { GetCountries, GetState, GetCity } from "react-country-state-city";

export default function App() {
  const [country, setCountry] = useState(null);
  const [currentState, setcurrentState] = useState(null);
  const [city, setCity] = useState(null);
  const [countriesList, setCountriesList] = useState([]);
  const [stateList, setStateList] = useState([]);
  const [citiesList, setCitiesList] = useState([]);
  useEffect(() => {
    GetCountries().then((result) => {
      setCountriesList(result);
    });
  }, []);
  useEffect(() => {
    if (country)
      GetState(parseInt(country)).then((result) => {
        setStateList(result);
      });
  }, [country]);
  useEffect(() => {
    if (currentState)
      GetCity(parseInt(country), parseInt(currentState)).then((result) => {
        setCitiesList(result);
      });
  }, [currentState]);

  return <div>...</div>;
}

Parameters

Name	Type	Default	Required	Description
countryid	number	Empty	✅	The id of the selected country object
stateid	number	Empty	✅	The ID of the selected state.
src	string	Empty	❌	URL where data files are hosted (e.g., https://venkatmcajj.github.io/react-country-state-city/)

Results

Returns a city object lists.

Sample

Show Code

import React, { useState, useEffect } from "react";
import { GetCountries, GetState, GetCity } from "react-country-state-city";
function App() {
  const [country, setCountry] = useState(null);
  const [currentState, setcurrentState] = useState(null);
  const [city, setCity] = useState(null);
  const [countriesList, setCountriesList] = useState([]);
  const [stateList, setStateList] = useState([]);
  const [citiesList, setCitiesList] = useState([]);
  useEffect(() => {
    GetCountries().then((result) => {
      setCountriesList(result);
    });
  }, []);
  useEffect(() => {
    if (country)
      GetState(parseInt(country)).then((result) => {
        setStateList(result);
      });
  }, [country]);
  useEffect(() => {
    if (country && currentState)
      GetCity(parseInt(country), parseInt(currentState)).then((result) => {
        setCitiesList(result);
      });
  }, [country, currentState]);
  return (
    <div
      style={{
        border: "1px solid gray",
        borderRadius: "8px",
        padding: "16px",
        marginTop: "16px",
      }}
    >
      <div style={{ maxWidth: "600px", margin: "auto" }}>
        <h3 style={{ marginTop: 10, marginBottom: 5 }}>Country</h3>
        <select
          onChange={(e) => setCountry(e.target.value)}
          value={country}
          style={{ width: "100%", minHeight: 40 }}
        >
          <option value={""}>-- Select Country --</option>
          {countriesList.map((_country) => (
            <option key={_country.id} value={_country.id}>
              {_country.name}
            </option>
          ))}
        </select>
        <h3 style={{ marginTop: 10, marginBottom: 5 }}>State</h3>
        <select
          onChange={(e) => setcurrentState(e.target.value)}
          value={currentState}
          style={{ width: "100%", minHeight: 40 }}
        >
          <option value={""}>-- Select State --</option>
          {stateList.map((_state) => (
            <option key={_state.id} value={_state.id}>
              {_state.name}
            </option>
          ))}
        </select>
        <h3 style={{ marginTop: 10, marginBottom: 5 }}>City</h3>
        <select
          onChange={(e) => setCity(e.target.value)}
          value={city}
          style={{ width: "100%", minHeight: 40 }}
        >
          <option value={""}>-- Select City --</option>
          {citiesList.map((_city) => (
            <option key={_city.id} value={_city.id}>
              {_city.name}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

export default App;

Country

-- Select Country --

State

-- Select State --

City

-- Select City --