I have created simple web-part in react and spfx for sharepoint online. In this web-part
weather.tsx have all rendering and function of the web-part. In componentDidMount function I call external API function by passing parameter and setState which will render web-part with new values.
public componentDidMount() {
this.getWeather(this.props.latitude, this.props.longitude, 'si').then((weatherForcast: IWeather) => {
this.setState({
weatherForcast: weatherForcast
})
})
this.getLocation(this.props.latitude, this.props.longitude).then((location: ILocation) => {
this.setState({
Locations: location
})
})
}
WeatherWebPart.ts have all property pane labels and field with its validation. I make this property pane non-reactive and added onAfterPropertyPaneChangesApplied but I don't know how to call those function in this web-part and change the state
My Repo
https://github.com/milindsaraswala/weather
I solved my issue by creating componentDidUpdate method with parameter interface of weather and checking old and new value if value mismatch then I will call getWeather and getLocation which will re-render component with new value. I don't know it correct way or not.
Please somebody can guide