如何在下拉列表中按省份显示城市名称？

Question

我无法根据所选省份显示城市名称。

因此，当用户在第一个下拉菜单中点击省名时，第二个下拉菜单将根据所选省份显示城市名称。

比如我选择了万丹省。出现的城市有 = Lebak Regency、Cilegon City 等等。

但是，当我运行该程序时，第二个下拉列表什么也没有显示。如下图所示。

请帮助我。谢谢

我的代码=

import React, { useState } from "react";
import {
  getCountPoiCategoryProvinsi,
  getCountPoiCategoryKota,
} from "../../../service/poi";

const ListOfProvinsi = [
  { provinsi: "Banten", value: "banten" },
  { provinsi: "DKI Jakarta", value: "dki" },
  { provinsi: "Jawa Barat", value: "jabar" },
  { provinsi: "Jawa Tengah", value: "jateng" },
  { provinsi: "Daerah Istimewa Yogyakarta", value: "yogya" },
  { provinsi: "Jawa Timur", value: "jatim" },
];

const ListOfCity = [
  { jatim: [
    { kota: "Bangkalan" },
    { kota: "Banyuwangi" },
    { kota: "Blitar" },
    { kota: "Bojonegoro" },
    { kota: "Bondowoso" },
    { kota: "Gresik" },
    { kota: "Jember" },
    { kota: "Jombang" },
    { kota: "Kediri" },
    { kota: "Lamongan" },
    { kota: "Lumajang" },
    { kota: "Madiun" },
    { kota: "Magetan" },
    { kota: "Malang" },
    { kota: "Mojokerto" },
    { kota: "Nganjuk" },
    { kota: "Ngawi" },
    { kota: "Pacitan" },
    { kota: "Pamekasan" },
    { kota: "Pasuruan" },
    { kota: "Ponorogo" },
    { kota: "Probolinggo" },
    { kota: "Sampang" },
    { kota: "Sidoarjo" },
    { kota: "Situbondo" },
    { kota: "Sumenep" },
    { kota: "Trenggalek" },
    { kota: "Tuban" },
    { kota: "Tulungagung" },
    { kota: "Kota Batu" },
    { kota: "Kota Blitar" },
    { kota: "Kota Kediri" },
    { kota: "Kota Madiun" },
    { kota: "Kota Malang" },
    { kota: "Kota Mojokerto" },
    { kota: "Kota Pasuruan" },
    { kota: "Kota Probolinggo" },
    { kota: "Kota Surabaya" },
  ]  },
  { jabar: [
    { kota: "Kabupaten Bandung" },
    { kota: "Kabupaten Bandung Barat" },
    { kota: "Kabupaten Bekasi" },
    { kota: "Kabupaten Bogor" },
    { kota: "Kabupaten Ciamis" },
    { kota: "Kabupaten Cianjur" },
    { kota: "Kabupaten Cirebon" },
    { kota: "Kabupaten Garut" },
    { kota: "Kabupaten Indramayu" },
    { kota: "Kabupaten Karawang" },
    { kota: "Kabupaten Kuningan" },
    { kota: "Kabupaten Majalengka" },
    { kota: "Kabupaten Pangandaran" },
    { kota: "Kabupaten Purwakarta" },
    { kota: "Kabupaten Subang" },
    { kota: "Kabupaten Sukabumi" },
    { kota: "Kabupaten Sumedang" },
    { kota: "Kabupaten Tasikmalaya" },
    { kota: "Kota Bandung" },
    { kota: "Kota Banjar" },
    { kota: "Kota Bekasi" },
    { kota: "Kota Bogor" },
    { kota: "Kota Cimahi" },
    { kota: "Kota Cirebon" },
    { kota: "Kota Depok" },
    { kota: "Kota Sukabumi" },
    { kota: "Kota Tasikmalaya" },
  ]  },
  { jateng: [
    { kota: "Kabupaten Banjarnegara" },
    { kota: "Kabupaten Banyumas" },
    { kota: "Kabupaten Batang" },
    { kota: "Kabupaten Blora" },
    { kota: "Kabupaten Boyolali" },
    { kota: "Kabupaten Brebes" },
    { kota: "Kabupaten Cilacap" },
    { kota: "Kabupaten Demak" },
    { kota: "Kabupaten Grobogan" },
    { kota: "Kabupaten Jepara" },
    { kota: "Kabupaten Karanganyar" },
    { kota: "Kabupaten Kebumen" },
    { kota: "Kabupaten Kendal" },
    { kota: "Kabupaten Klaten" },
    { kota: "Kabupaten Kudus" },
    { kota: "Kabupaten Magelang" },
    { kota: "Kabupaten Pati" },
    { kota: "Kabupaten Pekalongan" },
    { kota: "Kabupaten Pemalang" },
    { kota: "Kabupaten Purbalingga" },
    { kota: "Kabupaten Purworejo" },
    { kota: "Kabupaten Rembang" },
    { kota: "Kabupaten Semarang" },
    { kota: "Kabupaten Sragen" },
    { kota: "Kabupaten Sukoharjo" },
    { kota: "Kabupaten Tegal" },
    { kota: "Kabupaten Temanggung" },
    { kota: "Kabupaten Wonogiri" },
    { kota: "Kabupaten Wonosobo" },
    { kota: "Kota Magelang" },
    { kota: "Kota Pekalongan" },
    { kota: "Kota Salatiga" },
    { kota: "Kota Semarang" },
    { kota: "Kota Surakarta" },
    { kota: "Kota Tegal" },
  ]  },
  { yogya: [
    { kota: "Kabupaten Bantul" },
    { kota: "Kabupaten Gunungkidul" },
    { kota: "Kabupaten Kulon Progo" },
    { kota: "Kabupaten Sleman" },
    { kota: "Kota Yogyakarta" },
  ]  },
  { dki: [
    { kota: "Kepulauan Seribu" },
    { kota: "Jakarta Barat" },
    { kota: "Jakarta Pusat" },
    { kota: "Jakarta Selatan" },
    { kota: "Jakarta Timur" },
    { kota: "Jakarta Utara" },
  ]  },
  { banten: [
    { kota: "Kabupaten Lebak" },
    { kota: "Kabupaten Pandeglang" },
    { kota: "Kabupaten Serang" },
    { kota: "Kabupaten Tangerang" },
    { kota: "Kota Cilegon" },
    { kota: "Kota Serang" },
    { kota: "Kota Tangerang" },
    { kota: "Kota Tangerang Selatan" },
  ]  },
]

const PoiComp = () => {
  const [selected, setSelected] = useState("");
  const [selected2, setSelected2] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [dataProvinsi, setDataProvinsi] = useState([]);
  const [dataKota, setDataKota] = useState([]);

  const handleProvinsi = async () => {
    try {
      setIsLoading(true);
      const result = await getCountPoiCategoryProvinsi(selected);
      setDataProvinsi(result);
      console.log(result);
    } catch (error) {
      console.log("salah");
    } finally {
      setIsLoading(false);
    }
  };

  const handleKota = async () => {
    try {
      setIsLoading(true);
      const result = await getCountPoiCategoryKota(selected, selected2);
      setDataKota(result);
      console.log(result);
    } catch (error) {
      console.log("salah");
    } finally {
      setIsLoading(false);
    }
  };

  // console.log(selected);
  // console.log(selected2);

  return (
    <div className="mx-auto my-8 w-[70rem] bg-white px-5 py-3 md:px-8 md:py-5 rounded-md drop-shadow-xl">
      <div className="flex justify-between mb-6">
        <select
          value={selected}
          onChange={(e) => {
            setSelected(e.target.value);
          }}
          onClick={(e) => {
            handleProvinsi(e);
          }}
          id="show"
          className="form-select appearance-none block w-72 px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding bg-no-repeat border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
        >
          {ListOfProvinsi.map((option, index) => (
            <option key={index}>{option.provinsi}</option>
          ))}
        </select>
        <select
          value={selected2}
          onChange={(e) => {
            setSelected2(e.target.value);
          }}
          onClick={(e) => {
            handleKota(e);
          }}
          id="show"
          className="form-select appearance-none block w-72 px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding bg-no-repeat border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
        >
          {ListOfCity.map((option, index) => (
            <option key={index}>{option.kota}</option>
          ))}
        </select>
      </div>

      <div className="overflow-x-auto relative shadow-md sm:rounded-lg">
        <table className="table-auto w-full text-sm text-left text-gray-500 dark:text-gray-400">
          <thead className="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
            <tr>
              <th scope="col" className="py-3 px-7">
                Nama Daerah
              </th>
              <th scope="col" className="py-3 px-7">
                Category
              </th>
              <th scope="col" className="py-3 px-7">
                Jumlah
              </th>
            </tr>
          </thead>
          <tbody>
            {isLoading && <div>loading...</div>}
            {!dataProvinsi
              ? "Data Tidak Ditemukan"
              : dataProvinsi.map((item) => (
                  <>
                    <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                      <td className="py-4 px-7 font-medium text-[#696974] whitespace-nowrap dark:text-white">
                        {item.provinsi}
                      </td>
                      <td className="py-4 px-7 font-medium text-[#696974] whitespace-nowrap dark:text-white">
                        <p className="ml-3">{item.category}</p>
                      </td>
                      <td className="py-4 px-7 font-medium whitespace-nowrap dark:text-white">
                        <p className="ml-3">
                          {item.jumlah_category
                            .toString()
                            .replace(/\B(?=(\d{3})+(?!\d))/g, ".")}
                        </p>
                      </td>
                    </tr>
                  </>
                ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default PoiComp;

https://codesandbox.io/s/brave-heyrovsky-t9v6rl?file=/src/App.js