comment_JSON.es

var data = [
        {id:1, author:"Mr.Tony", text:"This is the best comment app ever."},
        {id:2, author:"Obhama", text: "Love this thing."}
      ];
      
class CommentList extends React.Component{
        render() {
          var commentNodes = this.props.data.map(function(comment){
            return (
                <Comment author={comment.author} key = {comment.id}>
                  {comment.text}
                </Comment>
              );
          });
          return( 
            <div className="commentList">
              {commentNodes}
            </div>
            );
        }
      }
class Comment extends React.Component{
        rawMarkUp()  {
          var rawMarkUp = marked(this.props.children.toString(), {sanitize:true});
          return {__html: rawMarkUp};
        }
        render() {
          return(
             <div className="comment">
               <h2 className="commentAuthor">
                {this.props.author}
               </h2>
               <span dangerouslySetInnerHTML={this.rawMarkUp()}/>
             </div>
            );
        }
      }
class CommentBox extends React.Component{
        render (){
          return (
              <div className="commentBox">
                  <h1>Comments</h1>
                  <CommentList data = {this.props.data}/>
                  <CommentForm />
              </div>
            );
        }
      }