I'm using spfx and react, i have toggle on WebPart properties, and i want to re redner when toggle was change in the .Ts page not in Tsx, i have no idea how to do this, there is no SetState on .ts. I want when toggle is changed, List get the other list (bascule with ListA and ListB)

public render(): void {

    const element: React.ReactElement<IFaqProps > = React.createElement(
        List : this.this.properties.checkToggle==true? this.ListA : this.ListB


    ReactDom.render(element, this.domElement);


protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

      return {
        pages: [
            header: {
              description: strings.PropertyPaneDescription
            groups: [
                groupName: strings.BasicGroupName,
                groupFields: [
                PropertyPaneTextField('description', {
                  label: 'description'

                PropertyPaneToggle('checkToggle', {
                label : "Toggle",
               checked : false,
               onText : "Yes",
               offText: "NO"


Custom onPropertyPaneFieldChanged to re-render webpart.

Sample code.

protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
    if (propertyPath === 'listName' && newValue) {
      // push new list value
      super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
      // refresh the item selector control by repainting the property pane
      // re-render the web part as clearing the loading indicator removes the web part body
    else {
      super.onPropertyPaneFieldChanged(propertyPath, oldValue, oldValue);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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