The Comments component receives the list of comments for the specific post as props from the Post component. Then, it iterates over the individual comments to render the details of the commenter and the comment content. This view is implemented with the following code.

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

{ props.comments.map((item, i) => {
            return <CardHeader
                      avatar={
                        <Avatar className={classes.smallAvatar} 
                          src={'/api/users/photo/'+item.postedBy._id}/>
                      }
                      title={commentBody(item)}
                      className={classes.cardHeader}
                      key={i}/>
            })
}

commentBody renders the content, including the name of the commenter linked to their profile, the comment text, and the date of comment creation. commentBody is defined as follows.

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

const commentBody = item => {
      return (
        <p className={classes.commentText}>
          <Link to={"/user/" + item.postedBy._id}>
              {item.postedBy.name} </Link><br/>
          {item.text}
          <span className={classes.commentDate}>
            { (new Date(item.created)).toDateString()} |
            { auth.isAuthenticated().user._id === item.postedBy._id &&
              <Icon onClick={deleteComment(item)} 
                    className={classes.commentDelete}>delete</Icon> }
          </span>
        </p>
      )
}

commentBody will also render a delete option for the comment if the postedBy reference of the comment matches the currently signed-in user. We will look at the implementation of this comment deletion option in the next section.