I have this function where I get the value of fields from my spfx list:
async getFieldOptions(){
const optionDrop: IDropdownOption[]= [];
const variable: IEleccion = await sp.web.lists.getByTitle("Groups").fields.getByTitle("Sector").get()
let items: IListItem[] = [];
variable.Choices.forEach(vari=>{
optionDrop.push({key: vari, text: vari})
})
return optionDrop
}
Then I want to get those values to insert them in a html Dropdown, but I obtain an error because my function returns a promise and "options" require a 'IDropdownOption[] ' and I don't know how to solve it:
<Dropdown
options={ListGroupService.getFieldOptions()}
/>
Use useState and useEffect.
const Component = () => {
const [options, setOptions] = useState<IDropdownOption[]>();
useEffect(() => {
ListGroupService.getFieldOptions().then(setOptions);
}, [])
if(!options){
return <>Loading...</>
}
<Dropdown options={options} />
}