TypeScript 'this' is undefined when calling a function within HTML String

Question

I want to call a simple TypeScript function from within an HTML variable. The Button with the HTML is attempting to call '_Myfunction' which creates a simple Alert();.

Clicking on the button produces the following error:

typeError: Cannot read property '_Myfunction' of undefined

How can I resolve this error? And the code is below:

  constructor() {
    super();

  }
  postInitialize(): void {

  }
  render() {
        
    this.mapHelper.map.getSelectedAssets().then(function(resolvedValue) {
        if(resolvedValue != null){

            masterHTMLstring = 
                <table style="background-color:#FFFFFF;width:200px;">
                  {resolvedValue.map((item, index) => (
                    <tr key={index}>     
                       <td>
                        <button id={item.EntityUid} onclick={() => this._myfunction(item.EntityUid)}>Add</button>
                      </td>
                    </tr>
                  ))}
                </table>;


        }   

      }, function(error) {
          //masterHTMLstring = "error";

      });
    return <div class="basemap23"  >{masterHTMLstring}</div>;
  }

  destroy(): void {
    this._handles.destroy();
    this._handles = null;
  }
    
  public _myfunction(entityID: string): void {
    alert(entityID);
  }

To use a click handler in React, use `onClick`, not `onclick` — CertainPerformance, Sep 15 '20 at 15:28
Replace `function(resolvedValue) {` with `resolvedValue => {` — , Sep 15 '20 at 15:29
@ChrisG if you post your comment as an answer i will accept. that worked for me — objectively C, Sep 15 '20 at 15:33
Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — , Sep 15 '20 at 15:35
Try to include this code: this._myfunction.bind(this) into your constructor — captain-yossarian from Ukraine, Sep 15 '20 at 16:07

score 1 · Accepted Answer · answered Sep 15 '20 at 16:25

1

Replace function(resolvedValue) { with resolvedValue => {

and that should be good

answered Sep 15 '20 at 16:25

DBA108642

1,995
1
18
55

This was the answer. shout out Chris G – objectively C Sep 15 '20 at 16:27

TypeScript 'this' is undefined when calling a function within HTML String

1 Answers1

Linked