Best way to call multiple useList
I want to call multiple useList for multiple data to map in multiple selects on my page.
I already have 1:
export const PatientCreatePage: React.FC<PropsWithChildren> = ({
children,
}) => {
const { data, isLoading, isError } = useList<TCountry, HttpError>({
resource: 'dataCountryList',
});
if (isLoading) {
return <div>Loading countries...</div>;
}
if (isError) {
return <div>Error loading countries!</div>;
}
const countryList = data?.data;
return (
<>
<Modal><Form><Form.Item />
<Select options={ countryList?.map((country) => ( {
label: country.name,
value: country.country_id,
}))}/>
</Form.Item></Form></Modal>{children}</>
);
};
It's working well, but if I want to add another let's say TState, TCity, TDistrict. Do I have to write that long code out again for each of them? Can I put them in another file and get the data here and assigned them to each selects. What's the best most conventional way, shorter code, same functionalities
I already have 1:
export const PatientCreatePage: React.FC<PropsWithChildren> = ({
children,
}) => {
const { data, isLoading, isError } = useList<TCountry, HttpError>({
resource: 'dataCountryList',
});
if (isLoading) {
return <div>Loading countries...</div>;
}
if (isError) {
return <div>Error loading countries!</div>;
}
const countryList = data?.data;
return (
<>
<Modal><Form><Form.Item />
<Select options={ countryList?.map((country) => ( {
label: country.name,
value: country.country_id,
}))}/>
</Form.Item></Form></Modal>{children}</>
);
};
It's working well, but if I want to add another let's say TState, TCity, TDistrict. Do I have to write that long code out again for each of them? Can I put them in another file and get the data here and assigned them to each selects. What's the best most conventional way, shorter code, same functionalities
