Full-Stack React Projects

Listing comments

The Comments component receives the list of comments for the specific post as props from the Post component, then iterates over the individual comments to render the details of the commenter and the comment content.

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

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

The commentBody renders the content including the name of the commenter linked to their profile, the comment text, and the date of comment creation.

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

const commentBody = item => {  return (     <p className={classes.commentText}> <Link to={"/user/" + ...