Re call api when property in SPFX property pane is changed

Question

This is possibly a really stupid question but here goes.

I've got a dropdown field in my Property pane that is populated with all lists from the current site. This is working no problem.

When I change the drop down I populate a property with the ID of the list. Within my react component I call the below

public componentDidMount(){
     var url = this.props.webUrl + "/_api/web/lists(guid'"+ this.props.listId+"')/items";
     console.log("LIST API = " + url);
     var getListInfo: FetchListData = new FetchListData();
      getListInfo.getItems(url, this.props.client).then((data) => {

         this.setState({ navItems: data });
      })
  }`

My assumption is that when the web part initially loads the component is rendered on to the page but if I update the Property it's not then recalling this componentDidMount because technically it's already mounted.

What I would like to do is get the component to re-render once I change the list(the dropdown property) . What I currently have will work because once you save the page it will render out all the retrieved items. I'm just assuming there would be a way to make it dynamic.

My experience with react is basic to say the least so any direction would be perfect.

Cheers

Truez

Answer 1

Figured this one out after looking in to the React page cycle.

componentDidUpdate(prevProps, prevState) {
  //If statement checking if your property or state has changed.
  //Re run API call 
}

Cheers

Truez