How can I display city names in dropdown by province?

Question

I'm having trouble displaying the names of the cities according to the chosen province.

So, when the user clicks on the province name in the first dropdown, the second dropdown will display the city name based on the province selected.

For example, I selected the province of Banten. The cities that appear are = Lebak Regency, Cilegon City, and so on.

However, when I run the program, the second dropdown displays nothing. as in the image below.

enter image description here

Please help me. Thank You

My Code =

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

Answer 1

By changing the structure "ListOfCity" to be an object of provinces mapped to an array of cities, it can then be used to access a city by province as key. Note that I also added value prop to the province selector.

import React, { useState } from 'react';

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' },
  ],
};

export default function App() {
  const [selected, setSelected] = useState('jatim');
  const [selected2, setSelected2] = useState('');

  return (
    <div className="App">
      <select
        value={selected}
        onChange={(e) => {
          setSelected(e.target.value);
        }}
        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} value={option.value}>
            {option.provinsi}
          </option>
        ))}
      </select>
      <select
        value={selected2}
        onChange={(e) => {
          setSelected2(e.target.value);
        }}
        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[selected]?.map((option) => (
          <option>{option.kota}</option>
        ))}
      </select>
    </div>
  );
}

Stackblitz demo (csb seems to down right now)