Setting Web Part Properties From Outside the Property Panel?

Question

I have created a custom async Property Pane Dropdown to grab list information which in turn renders data to the page depending on what list is chosen.

The rendered information is saved to the root React component's state and can be further customized by clicking buttons that alter the component's state.

What I would like to happen is that once the user is satisfied with their changes, they can commit this React Component's state to a Web Part Property so that the Web Part knows to look at that property, and then load that information next time the web part is mounted.

Is there a way to set web part properties from a source other than the property pane?

Thank you

Answer 1

Hey quick update: I realized a way to solve this problem on my own. I created two new properties on my WebPart.ts file. One to hold the value I wanted to keep and another that's a function which updates it:

 fieldSettings: this.properties.fieldSettings,
 GetFieldSettings: this.properties.GetFieldSettings = (a: Array<Object>) => {
      this.properties.fieldSettings = a;
    }

I then use componentDidUpdate() within my React component to check if I need to run this function to update the top-level this.properties.fieldSettings property.