Promise<IDropdownOption[]> to <IDropdownOption[]>

Question

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()}
/>

Answer 1

Use useState and useEffect.

const Component = () => {
    const [options, setOptions] = useState<IDropdownOption[]>();
    
    useEffect(() => {
      ListGroupService.getFieldOptions().then(setOptions);
    }, [])
    
    if(!options){
      return <>Loading...</>
    }
    
    <Dropdown options={options} />
    }