How to change state in webpart.tsx from wepart.ts property pane - SPFx

Question

I am trying to add a button to my property pane that will pop up a modal where the user will be able to enter in an image to be displayed on my banner webpart which is just an image carousel.

I currently have a PropertyPaneButton. I would like to set the value of the onClick key to a function as it's value that can setState within my webpart.tsx file allowing me to rerender the DOM. I have a stateful banner.tsx file that is holding my banner images for the carousel in an array.

My idea is that once the user clicks add image from the modal I'll be able to grab what's been entered in the text field, create a new object, and setState to have the DOM rerender with the new picture added to the carousel.

The issue seems to be that I am unable to link my webpart.ts file - where my property pane and add image button is, to my webpart.tsx file - where my state holding the images is.

Admittedly, I am new sharepoint framework and am having difficulties navigating the documentation for a possible solution.

Answer 1

Here how I would do it:

1. Create a state variable that keeps track of whether to show/hide the dialog (e.g,: showCallout).
2. In your constructor, set the variable to false.
3. In your render method, conditionally wrap the dialog rendering code. E.g.: { this.state.showDialog ? : null }

The awesome sp-dev-fx-property-controls library uses a similar trick with their property controls, except that they use the Office UI fabric Callout controls. Check out the code at https://github.com/SharePoint/sp-dev-fx-property-controls/blob/f66083ed4b760dd8a4e28789f7bbcbed3249dfa9/src/common/placeholderWithCallout/PlaceholderWithCallout.tsx.

I hope I understood your question properly and this helps?

Good luck!