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