Full-Stack React Projects - Second Edition

Listing comments

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 ...