This is my web part below, I need to call an API so I can dynamically populate the scope property dropdown that are provided as 'settings' to the web part.
Can I use componentdidmount? Doesn't seem to be working when I try that though.
The API im trying to call is the getEvents()
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';
export interface IUpcomingEventsWebPartProps {
description: string;
layoutToggle: boolean;
headerToggle: boolean;
tooltipToggle: boolean;
scope: string;
dateRange: string;
category: string;
context: WebPartContext;
}
export default class UpcomingEventsWebPart extends BaseClientSideWebPart<IUpcomingEventsWebPartProps> {
private httpClient: AadHttpClient;
public getEvents() {
this.httpClient.post('https://********.azurewebsites.net/api/GetEvents', AadHttpClient.configurations.v1, {
body: JSON.stringify({
"RangeStartDate": '2021-01-01',
"RangeEndDate": '2050-01-01',
})
})
.then((res: HttpClientResponse): Promise<any> => {
return res.json();
})
.then(res => {
console.log(res);
})
}
public render(): void {
const element: React.ReactElement<IUpcomingEventsProps> = React.createElement(
UpcomingEvents,
{
description: this.properties.description,
scope: this.properties.scope,
context: this.context
}
);
ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: 'Title'
}),
PropertyPaneDropdown('scope', {
label:'Scope',
options: [
{ key: 'All', text: 'All' },
{ key: 'United Kingdom', text: 'United Kingdom' },
{ key: 'Germany', text: 'Germany' },
{ key: 'Mexico', text: 'Mexico' },
{ key: 'SPAIN', text: 'SPAIN' }
],
selectedKey: 'All',
})
]
}
]
}
]
};
}
}
componentDidMount
. Where is that in your code though? I don't seecomponentDidMount
in there or anywhere else where you callgetEvents
.