My backend is providing me with an array of flavors.
This is how I am using it in my jsx:
<div className="mb-3">
<Select options={flavorOptions} onChange={onSelectOption} value={flavor} />
</div>
I have formatted the array to match the required format for react-select:
const flavorOptions =
[
flavors.map(f => {
return {
value: f, label: f
}
})
]
This is my onSelectOption function:
const onSelectOption = (option) => {
const copy = {...order}
copy.flavor = option.value
setOrder(copy)
}
Here is the output
However, when I click on the supposedly invisible option that shows up as the first one, the entire array is passed instead of just the selected value.
So, I have three questions:
- Why does only one option show up?
- Why is the option not visible?
- Why does the whole array get sent to the onSelectOption function instead of just the chosen value?
I tried adding
getOptionLabel={option => option.label} getOptionValue={option => option.value}<Select>
{flavorOptions.map(flavor => {
<option key={flavor.label} value={flavor.value} > {flavor.label}</option>
})}
</Select>
Unfortunately, it resulted in displaying a message saying "No options." If anyone can point out where I might be going wrong, I would truly appreciate the help. Being new to react and programming, I understand if I've made a careless mistake.