Tree menu by consuming API and Params - reactjs

Question

I have a question and at the same time ask you for help because I have a problem in my coding.
So, I intend to display the "City" menu based on the "Province" parameter in my menu component tree.
I previously managed to display the provincial name menu in the tree menu component, the result is like this.
Well, later when the menu names of the provinces will appear the names of the cities based on the "province" parameter. However, when I tried it, it failed. The result is like this
Here's my code =
Building.js
export const getBuildingOLDallProvinsi = () => {
return new Promise((resolve, reject) => {
axios
.get(`${baseUrl}/api/nad/buildingCount`, {
headers: { Authorization: `Bearer ${token}` },
})
.then((response) => {
resolve(response.data.data);
})
.catch((error) => {
if (error.response?.data.code === 404)
resolve({ lists: [], totalCount: 0 });
console.log(error.response);
reject(error?.response?.data?.message || "Network error.");
});
});
};
export const getBuildingOLDallKota = (provinsi) => {
return new Promise((resolve, reject) => {
axios
.get(`${baseUrl}/api/nad/buildingCount/${provinsi}`, {
headers: { Authorization: `Bearer ${token}` },
})
.then((response) => {
resolve(response.data.data);
})
.catch((error) => {
if (error.response?.data.code === 404)
resolve({ lists: [], totalCount: 0 });
console.log(error.response);
reject(error?.response?.data?.message || "Network error.");
});
});
};
TreeData.jsx
import React, { useEffect, useState } from "react";
import TreeMenu from "react-simple-tree-menu";
import "react-simple-tree-menu/dist/main.css";
import {
getBuildingOLDallProvinsi,
getBuildingOLDallKota,
} from "../../../service/building";
import { useParams } from "react-router-dom";
const TreeData = () => {
const [countData, setCount] = useState([]);
const [countData2, setCount2] = useState([]);
const getDataAllProvinsi = () => {
getBuildingOLDallProvinsi()
.then((resolve) => {
console.log(resolve);
setCount(resolve);
})
.catch((reject) => {
console.log(reject);
});
};
const { provinsi } = useParams();
const getDataAllKota = (param) => {
getBuildingOLDallKota({ ...param, provinsi: provinsi })
.then((resolve) => {
console.log(resolve);
setCount2(resolve);
})
.catch((reject) => {
console.log(reject);
});
};
useEffect(() => {
getDataAllProvinsi();
getDataAllKota();
}, []);
return (
<>
<div className="row">
<div className="col text-center">
<p className="mt-3">
<div className="row mt-3 d-flex justify-content-center cursor-pointer">
<div className="col-lg-8 text-left text-dark">
<TreeMenu
cacheSearch
data={[
{
key: "provinsi",
label: "Provinsi",
nodes: countData.map((data) => {
return {
key: data.id,
label: [data.provinsi, data.total_building],
nodes: [
{
key: "kota",
label: "Kota",
nodes: countData2.map((data) => {
return {
key: data.provinsi,
label: [data.kota, data.total_building],
nodes: [
{
key: data.id,
label: data.total_building,
nodes: [],
},
],
};
}),
},
],
};
}),
},
]}
debounceTime={125}
disableKeyboard={false}
hasSearch={false}
onClickItem={function noRefCheck() {}}
resetOpenNodesOnDataUpdate={false}
/>
</div>
</div>
</p>
</div>
</div>
</>
);
};
export default TreeData;
Thank you in advance, your help is very helpful for me and I really respect all of your answers.
Edit = this is my response API
pastebin(dot)com/Bua3FThZ
pastebin(dot)com/ERSCHDSR

Answer 1

Update:
In the console I can display param data based on the province.
For example, the data for the province is "ACEH", then the ACEH data appears in the console ...
const getDataAllKota = (param) => {
getBuildingOLDallKota("ACEH")
.then((resolve) => {
console.log(resolve);
setCount2(resolve);
})
.catch((reject) => {
console.log(reject);
});
};
console.log(countData2);
Now I'm confused about how to display param data by province in the component tree menu.