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
Replace function(resolvedValue) { with resolvedValue => { — Chris G
@ChrisG if you post your comment as an answer i will accept. that worked for me — objectively C
Does this answer your question? How does the "this" keyword work? — Chris G

DBA108642 DBA108642 · Accepted Answer · 2020-09-15T16:25:58

1

votes

Replace function(resolvedValue) { with resolvedValue => {

and that should be good

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

1 Answers