React State in Property Pane?

Question

While using SPFx with React how do I use state in the property pane to change and manipulate values instead of default properties? Can I add state to the BaseClientSideWebPart? Or is there another way to do it?

Note: I am trying to use state in the .ts file and not the tsx file. If you do in fact use state in the tsx file, how do you connect it to your ts file and have that data save?

Example: Todo list where you could enter in a todo from the property pane and it would update state to render your list of todos on the page and have state save along with your other properties.

Are there there any examples of people using state in SPFx React?

What do you use for documentation on SPFx React? Microsoft Docs don't seem to be doing it for me right now.

Thank you!

Answer 1

While using SPFx with React how do I use state in the property pane to change and manipulate values instead of default properties?Can I add state to the BaseClientSideWebPart? Or is there another way to do it?

You don't have state for property pane since it is not react component. If I understand you correctly, either
1) You want to manipulate state of webpart from webpart property value: Webpart doesn't have state since it is also not react component. So answer to your next question is also NO which is "Can I add state to the BaseClientSideWebPart".

2) You want to manipulate state of some React Component from prop (for e.g. Todo List Component with Todo item array as part of state): You have to pass this webpart property as property to React Component (in case of Todo list Todo component)

For React Component to respond to value change in Webpart Property you first you need to override onPropertyPaneFieldChanged method in BaseClientSideWebPart to pass this new value as prop to react component and then re-render webpart so that it could re render the component. Than you need to define componentWillReceiveProps in your react component which is the event fired when properties of component are changed. Here you can manipulate state of the component.

I am trying to use state in the .ts file and not the tsx file. If you do in fact use state in the tsx file, how do you connect it to your ts file and have that data save?

You pass data from .ts file to your .tsx file as props. E.g.

public render(): void {
const element: React.ReactElement<ITodoContainerProps > = React.createElement(
  TodoContainer,
  {
    dataProvider: this._dataProvider,
    webPartDisplayMode: this.displayMode,
    configureStartCallback: this._openPropertyPane
  }
);

 ReactDom.render(element, this.domElement);
}

You can look into this sample webpart on Github for further understanding props flow.