The updateComments method, which will allow the comments and comment count to be updated when a comment is added or deleted, is defined in the Post component and passed as a prop to the Comments component. The updateComments method will look as follows:

mern-social/client/post/Post.js:

const updateComments = (comments) => {
    setValues({...values, comments: comments})
}

This method takes the updated list of comments as a parameter and updates the state that holds the list of comments rendered in the view. The initial state of comments in the Post component is set when the Post component mounts and receives the post data as props. The comments that are set here are sent as props to the Comments component and used to render the comment count next to the likes action in the action bar of the Post layout, as follows.

mern-social/client/post/Post.js:

<IconButton aria-label="Comment" color="secondary">
  <CommentIcon/>
</IconButton> <span>{values.comments.length}</span>

This relationship between the comment count in the Post component and the comments that are rendered and updated in the Comments component gives a simple demonstration of how changing data is shared among nested components in React to create dynamic and interactive user interfaces. 

The MERN Social application now contains the set of features we defined earlier for the application. Users are able to update their profiles with a photo and description, follow each other on the application, and create posts with photos and text, as well as like and comment on posts. The implementations shown here can be tuned and extended further to add more features in order to utilize the revealed mechanisms of working with the MERN stack.