Full-Stack React Projects

Header

The header will contain information such as the name, avatar, link to the profile of the user who posted, and the date the post was created.

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

<CardHeader  avatar={<Avatar src={'/api/users/photo/'+this.props.post.postedBy._id}/>}       action={this.props.post.postedBy._id ===              auth.isAuthenticated().user._id &&           <IconButton onClick={this.deletePost}>             <DeleteIcon />           </IconButton>          }         title={<Link to={"/user/" + this.props.post.postedBy._id}>            {this.props.post.postedBy.name}         </Link>}    subheader={(new Date(this.props.post.created)).toDateString()}  className={classes.cardHeader}/>

The header will also conditionally show a delete button if the signed-in user is viewing their own post.