How can I access 2 data attribute value using useRef hook? - reactjs

Question

here I am confused about accessing 2 parameters on the endpoint.
/api/nad/buildingCount/:provinsi/:kota
Previously I was able to access 1 parameter using useRef, for example like this =
const provinsi = provinsiRef.current[index].dataset.value;
But when I tried for the 2 parameters, it was beyond my expectations.
This is my code, is there something wrong?. please for the solution, thank you
const handleKota = async (index) => {
try {
const provinsi = provinsiRef.current.dataset.value;
const kota = provinsiRef.current[index].dataset.value;
setIsLoading(true);
const result = await getBuildingOLDallKecamatan(provinsi, kota);
setDataKecamatan(result);
console.log(result);
} catch (error) {
} finally {
setIsLoading(false);
}
};

Answer 1

It seems that when you call handleKota, only one index is passed to the function, but the index in provinsiRef.current[index] and in kotaRef.current[index] are different, since these are 2 different ref array.
From your links to full code:
const handleKota = async (index) => {
try {
const provinsi = provinsiRef.current[index].dataset.value;
const kota = kotaRef.current[index].dataset.value;
setIsLoading(true);
const result = await getBuildingOLDallKecamatan(provinsi, kota);
setDataKecamatan(result);
console.log(result);
} catch (error) {
} finally {
setIsLoading(false);
}
};
As a result you might be getting mismatched provinsi and kota.
Possible solutions
Data attribute can carry a number of values. Therefore, you can give each kota item a value of provinsi they belong, such as data-provinsi. This way, you just need to access the kota ref, not both, to get everything needed for handleKota.
Instead of using ref to access data-set, use an approach that is not dependent on index. This does require some major refactor of existing code though. Perhaps check this answer for a quick example about accessing data-set with the event object.