What happens when you select or deselect a site in my React-News web part? My web part makes use of propertyPaths, ComponentDidUpdate, and more. It gets the news posts from the current site it’s deployed on by default but you can add as many sites as you’d like. Let’s see how all of this works!

In this method we have a check to see if the updated property was adding or deselecting a site. If you did update the selected sites, and the propertyPath is “sites”, then go ahead and create a constant called value casted to the IPropertyFieldSite array.

We then assign that variable the array of the latest sites. Now, if the value constant exists and doesn’t have anything in it, reassign the property Site to be empty ( make sure it’s not null ) and refresh the property pane to show the change.

If that is not true we tell our code to go ahead and change to the value to be the latest and refresh as well.

In our component did mount method we have a condition to check if the parameter passed to it had sites in it or if it had no sites in it.

if (this.props.Site.length > 0) {} else {}

If we have no sites in this we want to get the current site’s news posts, the default. If there are sites selected, however, we want to update our list of sites with the news posts of all the selected sites. You will notice that in the ComponentDidMount method we have it set to ‘Default’. This is because when the web part is initially deployed it doesn’t have any sites selected yet, so it will always be set on the Default mode. We set the reload to be true or false so that our child components update as well, passing the updated list of all the news posts as a property to them.

Moving to the Single Style and Stack Style, we make use of the same if statement as in the React News Web part file we just looked at but have some more stuff going on.

We create some variables: array, count, min, and max. These are used for getting the right news posts. You can check out this in another one of my blogs, React-News-Pagination.

For the parent component did update we just called a method but in this case we just get the first three posts in this method. We also set the starting state to what they should be when you reload a page. For example, if you reload a page you would expect it to go back to the first page not stay on the second, so we set the Count to 1 and Next to 3.

If you have the same news property but another property has changed such as the UpdateCount or Reload properties, we just do the same thing getting the first three news posts. I did notice that I got a maximum update status error so I made sure to only update the web part 3 times.

Conclusion

Now that you’ve seen how I use ComponentDidUpdate you can add it in your web part! We used a combination of state and properties to pass information from parent to child components. Feel free to check out the web part that uses this and the video I have that goes over it!