The actions section will contain an interactive "like" option with a display of the total number of likes on the post and a comment icon with the total number of comments on the post. The code to display these actions will be as follows.

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

<CardActions>
   { values.like
       ? <IconButton onClick={clickLike} className={classes.button} 
                     aria-label="Like" color="secondary">
            <FavoriteIcon />
         </IconButton>
       : <IconButton onClick={clickLike} className={classes.button} 
                     aria-label="Unlike" color="secondary">
            <FavoriteBorderIcon />
         </IconButton> } <span>{values.likes}</span>
         <IconButton className={classes.button} 
                     aria-label="Comment" color="secondary">
            <CommentIcon/>
         </IconButton> <span>{values.comments.length}</span>
</CardActions>

We will discuss the implementation of the "like" button later in this chapter. The details of the likes for each post are retrieved within the post object that's received in the props.

In the Post component, the final section will display the comments that have been left on the given post. We'll discuss this next.