Sharepoint Property Panel Add Button and show Added Items

Question

I am trying to make Links applications. On the property Panel, the user can select what links to add on this web part. After the user Selects the Title of the link, the user clicks Add. I expect to have the Item/ List of Items shown in the web part.

Please kindly advise what was missing? I checked on this.data there is value, however this.props.data is undefined. I suspect because I didn't render it in the Webpart.ts, if so how to make it re-render?

WebPart.ts

import * as React from "react";
import * as ReactDom from "react-dom";
import { Version } from "@microsoft/sp-core-library";
import {
  PropertyPaneTextField,
  PropertyPaneCheckbox,
  PropertyPaneLabel,
  PropertyPaneLink,
  PropertyPaneSlider,
  PropertyPaneToggle,
  PropertyPaneDropdown,
  IPropertyPaneConfiguration,
  PropertyPaneButton
} from "@microsoft/sp-webpart-base";
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";

import * as strings from "MylinkWebPartStrings";
import Mylink from "./components/Mylink";
import { IMylinkProps } from "./components/IMylinkProps";
import { PropertyPaneButtonType } from "@microsoft/sp-property-pane";

export interface IMylinkWebPartProps {
  description: string;
  linkName: string;
  add: any;
  data: any;
}

export default class MylinkWebPart extends BaseClientSideWebPart<
  IMylinkWebPartProps
> {

  private data = [];

  private handleClick() {
    this.data = [...this.data, this.properties.linkName];
    this.context.propertyPane.refresh();
    this.onDispose();

    console.log(this.data);
    debugger;
  }
  public render(): void {
    const element: React.ReactElement<IMylinkProps> = React.createElement(
      Mylink,
      {
        description: this.properties.description,
        pagecontext: this.context.pageContext,
        SPHttpClient: this.context.spHttpClient,
        linkName: this.properties.linkName,
        add: this.properties.add,
        data: this.properties.data
      }
    );

    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: ""
          },
          groups: [
            {
              groupName: "Select Links to Add",
              groupFields: [
                PropertyPaneDropdown("linkName", {
                  label: "Title",
                  options: [
                    { key: "Select", text: "Select" },
                    { key: "google", text: "google" }
                  ]
                }),
                PropertyPaneTextField("URL", {
                  label: "URL"
                }),
                PropertyPaneButton("add", {
                  text: "Add Link",
                  buttonType: PropertyPaneButtonType.Primary,
                  onClick: this.handleClick.bind(this)
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Main.tsx

 public render(): React.ReactElement<IMylinkProps> {
    console.log(this.props);
    debugger;
    return (
      <div className={styles.mylink}>
        <div className={styles.container}>

          {this.props.data}
          {this.props.description}
        </div>
      </div>

Answer 1

I think you are only missing one step. You are updating your local data [] member value, but you are not saving that back to your webpart properties

Try updating handleClick to the following:

  private handleClick() {
    this.data = [...this.data, this.properties.linkName];
    this.properties.data = this.data;

    this.context.propertyPane.refresh();
    this.onDispose();

    console.log(this.data);
    debugger;
  }