I'm in the process of creating a WebPart that has similar functionality as the QuickLinks WebPart.

like QuickLinks, I have got the properties pane to display fields depending on whether the webpart edit is clicked or the add or edit link button is clicked.

Next I want to send the link ID to the Property Pane (if edit), which will display the properties from an array/object or, if no id generate new id / link.

then I want to return a updated link or add a new link.

I have tried calling a function defined in the properties pane, it calls the function but the value is undefined. using:-

in the webpart .tsx

this.props.editLinkItem("test-id"); // called when edit button clicked

in the props

export interface IJLinksProps {

in the property pane .ts

public render(): void {
    const element: React.ReactElement<IJLinksProps> = React.createElement(
        propPaneHandle: this.context.propertyPane,
        linkItems: this.properties.linkItems,
        editLinkItem: (id:string)=>{
    ReactDom.render(element, this.domElement);

any ideas why its undefined?

Another option is setting the id in a State, then how would I get that in the properties?

or has anyone any other ideas. Thanks

2 Answers 2


for anyone who is interested!

I have resolved this

in the props I changed



editLinkItem:(id: string) => void;

You have to do that with getPropertyPanelConfiguration(). Accordingly you had to import the corresponding PropertyPane type from '@microsoft/sp-property-pane' by simply adding it to the import here:

import {
//PropertyPaneButton, PropertyPaneDropdown, PropertyPaneLink, etc.
} from '@microsoft/sp-property-pane';

and add it to the getPropertyPaneConfiguration() function under the groupFields:

groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel,
                PropertyPaneTextField('configuration', {
                  label: 'Config',
                  value: this.config
 /*example:*/   PropertyPaneButton('Finish', {
                 label: 'Finish

To get the values of the text fields or the buttons you have to use the variable above at:

export interface [youWebPart]Props{
 description: string,
 configuration: string,
 final: bool,

or visit Here to Check how you get the Valu

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.