Wall Comment System with React JS Part Two

This post is continuation of React JS previous post. React JS is lighter and faster. It needs less coding and as mentioned in the earlier post, React suites best for one page application, front-end and single page websites. The article explains how to post a comment, delete a comment and also toggle(hide/show) a comment using React JS. React JS and Angular JS are two prominent frameworks in JavaScript now-a-days. As its a new series in my blog, I would appreciate for any doubts or your feedback in the comments so that I could explain it to you in a better way.

I personally, would suggest every web developer to learn React and Angular JS to design easy and make your web application work much awesome. Have a look at the demo - to post, delete and toggle a comment using React JS.

Step 6
Now go to WallUpdates component, replace and include CommentBlock component in following way. Created an attribute called dataCommentsBlock, assigned update.comments data from the news feed json data. Take a look the step 1

CommentBlock Component
This is comment container component, this contains CommentsGrid and CommentForm. Here you have to initialize the dataComments value from the CommentBlock component attribute this.props.dataCommentsBlock going to implement main operations.

Here we are going to implement toggle system for comment form, based on the comment link click action.

CommentBlock Component
Go to CommentBlock and include following functions. Here CommentLink function changing the showComment default value from false to true, renderCommentForm operates the CommentForm component based on showComment value.