I am new to TypeScript and SPFx development. I have a jquery UI dialog box and a public function in the same class that makes some MSGRAPH calls after the button has been clicked. The button click returns with error: > this.addAlert is not a function I think the problem is that the dialog code executes outside the web part context and hence does not know about the function available in the webpart context. How can I use the button click to run within the webpart context? Here is the Dialog code. public render(): void { this.domElement.innerHTML = AlertTemplate.templateHtml; const dialogOptions: JQueryUI.DialogOptions = { width: "50%", height: "auto", buttons: { "Subscribe": function (e) { this.addAlert("Yes"); jQuery(this).dialog("close"); }, "No Thanks": function (e) { console.log("moo"); this.addAlert("No"); jQuery(this).dialog("close"); }, "Ask me later": function (e) { this.addAlert("Ask Me Later"); jQuery(this).dialog("close"); } } }; jQuery('.dialog', this.domElement).dialog(dialogOptions); jQuery(".ui-dialog-titlebar").hide(); } **function addAlert** public addAlert(status: string): void { var url = "/sites/" + this.context.pageContext.site.id + "/lists"; var listId = ""; var email = this.getCurrentUserEmail(); var recordExists = false; let item: SubscriptionListItem; this.context.msGraphClientFactory .getClient() .then((client: MSGraphClient): void => { client .api(url) .top(1) .filter("equals=(displayName, 'Subscriptions'") .version("v1.0") .get((err, res) => { if (err) { console.error(err); return; } console.log(res); listId = res.id; }); });