Actions

The actions section will contain an interactive "like" option with the total number of likes on the post and a comment icon with the total number of comments on the post.

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

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

Get Full-Stack React Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.