IDropdownOption[]' is not assignable t" /> IDropdownOption[]' is not assignable t" /> IDropdownOption[]' is not assignable t"/>

Getting async value properly

43 Views Asked by At

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.

1

There are 1 best solutions below

0
Sam6792 On BEST ANSWER

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;
}