I am currently working on a project using NextJS version 13.4.7 with react, and I am facing an issue while trying to update data in a select field with information fetched from an API call. Upon initial page load, I have set a default option field and value for the select field to display instructions to the user.
// Simulating API output
let selectedDistricts = { "data": [{ dist_id: '0', name: 'Select a Province first' }] }
I have created a function that triggers an API call once a different field has selected a value. The problem lies in my attempt to update the selectedDistricts variable with the API data output, resulting in the API returning undefined.
function handleDistricts() {
console.log('Selected Province ID: ' + passedProvID)
// Issue arises when trying to update selectedDistricts with the API data
selectedDistricts = GetDistrictsAPI(passedProvID).then(data => {
console.log('Province District Data: ', data)
return data;
});
}
Interestingly, changing the variable name used in the API call to districts resolves the issue and returns the expected data.
function handleDistricts() {
console.log('Selected Province ID: ' + passedProvID)
districts = GetDistrictsAPI(passedProvID).then(data => {
console.log('Province District Data: ', data)
return data;
});
}
The challenge arises when attempting to populate the select field with the JSON data.
return (
<Field
as="select"
id="pxDistrict"
name="pxDistrict"
disabled={!values.pxProvince}
onChange={(e) => {
handleDistricts()
setFieldValue('pxDistrict', e.target.value)
}}
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
>
{selectedDistricts.data.map((p, i) => (
<option key={i} value={p.dist_id}>{p.name}</option>
))}
</Field>
)
You can find the full file here. My goal is to avoid creating separate select fields based on different datasets and instead use the same JSON object to map through the option fields within the select element. However, I am struggling to understand why I cannot update the data using the same variable.
I acknowledge that there may be specific features of NextJS 13 or other factors at play here, but I have tried various approaches without success. Any insights or suggestions would be greatly appreciated!
Thank you, Tim