Add code in render function of BaseClientSideWebPart with javascript

Question

I am creating custom client side web part for sharepoint. In the edit panel, when the button is clicked I would like to add more html after the code in the render method, but when the code is appended to the html in render method, its immediately deleted and replaced with what is hard coded.

export default class ContentCardWebPart extends BaseClientSideWebPart<IContentCardWebPartProps> {

  public render() {
    this.domElement.innerHTML = `
      <div class="${ styles.contentCard }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div id="contentCard" class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
  }


  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  private ButtonClick() {
    var myDiv = document.createElement("div");
    myDiv.innerHTML = `<div>${this.properties.description}</div>`;
    document.getElementById("contentCard").appendChild(myDiv);
  }

the button click method is linked to a button which appears in the edit panel and works when appending the code to document.body, but not to any of the code present within the render function. please help how can I modify this code with JavaScript?

Answer 1

You need to turn on the non-reactive mode, add the following code in your web part:

protected get disableReactivePropertyChanges(): boolean {
  return true;
}

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane#handle-field-changes