typescriptspfx

Getting async value properly


I am trying to populate a dropdownlist with the result from a async function but I get this error: "Type '() => IDropdownOption[]' is not assignable to type 'IDropdownOption[]'" and I tried many things but could not find the issue.

I hope someone can help me, here is my code.

The interface:

export interface countryChoices{
  id: string;
  text: string;
  selected: boolean;
  key: string;
 }

The function to get the values:

private async _getCountryForComboList()
  {
    let infos:IOrderedTermInfo[];
    await this._services.getCountryListFromTermStore().then((response:any) => {
      infos=response;
      let CountryList:Array<countryChoices> = new Array<countryChoices>()
      for(let i=0;i<infos.length;i++)
      { 
          let CountryChoice:countryChoices={
          id:i.toString(),
          selected:false,
          key:"CountryChoice",
          text:infos[i].labels[0].name  
        };
        CountryList.push(CountryChoice);
      }
      return CountryList;
    }).catch((err) => {
      console.error(err);
      throw err;
    });
  }

In the React render():

 <Dropdown className="w-100 p-3"
  label="Select a Country"
  options={this._getCountryForComboList}
 />

The error is raised on "options"

Thank you in advance.


Solution

  • Thanks to Svetoslav Petkov's comment, I was able find my error.

    He is what I did:

                  <Dropdown
                  label="Select a Country"
                  options={this._getCountryForComboList()}                    
                  />
    
    private _getCountryForComboList()
    {
      let infos:IOrderedTermInfo[];
      let CountryList:Array<countryChoices> = new Array<countryChoices>();
    
      this._services.getCountryListFromTermStore().then((response:any) => {
        infos=response;      
        for(let i=0;i<infos.length;i++)
        { 
            let CountryChoice:countryChoices={
            id:i.toString(),
            selected:false,
            key:"CountryChoice",
            text:infos[i].labels[0].name  
          };
          CountryList.push(CountryChoice);        
        } 
        this.setState({CountryList: CountryList},() =>{});     
      }).catch((err) => {   
        throw err;
      });  
      return this.state.CountryList;
    }