ReactsJS not showing new data

Question

I am trying ReactJS and following their documentation. I am trying to store new comment and displaying it but it is not showing new comments after submitting the form here is my code

/** @jsx React.DOM */

  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function(comment) {
        return (
          <Comment author={comment.author}>
          {comment.text}
          </Comment>
        );
      });
      return (
        <div className="CommentList">
          {commentNodes}
        </div>
      );
    }
  });
  var CommentBox = React.createClass({
    loadCommentsFromServer: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
          this.setState({data:data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    handleCommentSubmit: function(comment) {
      var comments = this.state.data;
      var newComments = comments.concat([comment]);

      this.setState({data: newComments});
      $.ajax({

        url: this.props.url,
        dataType: 'json',
        type: 'POST',
        data: comment,
        success: function(data) {
          this.setState({data:data});

        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    getInitialState: function() {
      return {data: []};
    },
    componentDidMount: function() {
      this.loadCommentsFromServer();
      setInterval(this.loadCommentsFromServer, this.props.pollInterval);
    },
    render: function() {
      return (
        <div className="CommentBox">

        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
        <h1>Comments</h1>
        <CommentList data={this.state.data} />

        </div>
        );
    }
  });
  var converter = new Showdown.converter();
  var Comment = React.createClass({
    render: function() {
      var rawMarkup = converter.makeHtml(this.props.children.toString());
      return(
          <div className="Comment">
          <h2 className ="commentAuthor">
          {this.props.author}
          </h2>
          <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
          </div>
      );
    }
  });
  var CommentForm = React.createClass({
    handleSubmit: function(e) {
      e.preventDefault();
      var author = this.refs.author.getDOMNode().value.trim();

      var text = this.refs.com.getDOMNode().value.trim();
      if(!text || !author) {

        return;
      }
      this.props.onCommentSubmit({author:  author, text: text});
      this.refs.author.getDOMNode().value = '';
      this.refs.com.getDOMNode().value = '';
      return;
    },
    render: function() {
      return(
        <form className="commentForm" onSubmit={this.handleSubmit} >
        <input type="text" placeholder="Your Name"  ref="author" />
        <input type="text" placeholder="Say Something.."  ref="com" />
        <input type="submit" value="Post" />
        </form>
      );
    }
  });
  React.render(
    <CommentBox url="comment.json"  pollInterval={2000} />,
    document.getElementById('content')
  );

and comment.json

[
  {"author": "abc", "text": "This is one comment"},
  {"author": "pqr", "text": "This is *another* comment"}
]

Answer 1

Just remove the line

var newComments = comments.concat([comment]);

in handleCommentSubmit function and add the line

comments.push(comment);

it will work see the full code of handleCommentSubmit function below

 handleCommentSubmit: function(comment) {
   var comments = this.state.data;
   comments.push(comment);
   this.setState({data: comments}, function() {

   $.ajax({
     url: this.props.url,
     dataType: 'json',
     type: 'POST',
     data: comment,
     success: function(data) {
       this.setState({data: data});
     }.bind(this),
     error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
    }.bind(this)
  });
 });
}