title: React.js tutorial: comments don't append in the list
body: <p>I am doing React.js tutorial and here is my code:</p>
  
  <pre><code>//Comment box
  var CommentBox = React.createClass({
    loadCommentsFromServer: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
          this.setState({data: data});
          console.log('Data has obtained... Refresh state')
        }.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 (
          &lt;div className="commentBox"&gt;
            &lt;h1&gt;Comments&lt;/h1&gt;
            &lt;CommentList data={this.state.data} /&gt;
            &lt;CommentForm onCommentSubmit={this.handleCommentSubmit} /&gt;
          &lt;/div&gt;
      );
    }
  });
  
  //Comment list
  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function(comment) {
        return (
          &lt;Comment author={comment.author}&gt;
            {comment.text}
          &lt;/Comment&gt;
        );
      });
      return (
        &lt;div className="commentList"&gt;
          {commentNodes}
        &lt;/div&gt;
      );
    }
  });
  
  //Comment form
  var CommentForm = React.createClass({
    handleSubmit: function(e) {
      e.preventDefault();
      var author = React.findDOMNode(this.refs.author).value.trim();
      var text = React.findDOMNode(this.refs.text).value.trim();
      if (!text || !author) {
        return;
      }
      this.props.onCommentSubmit({author: author, text: text});
      //TODO: send request to the server
      React.findDOMNode(this.refs.author).value = '';
      React.findDOMNode(this.refs.text).value = '';
    },
    render: function() {
      return (
          &lt;form className="commentForm" onSubmit={this.handleSubmit}&gt;
            &lt;input type="text" placeholder="Your name" ref="author" /&gt;
            &lt;input type="text" placeholder="Say something..." ref="text" /&gt;
            &lt;input type="submit" value="Post" /&gt;
          &lt;/form&gt;
      );
    }
  });
  
  //Comment
  var converter = new Showdown.converter();
  var Comment = React.createClass({
    render: function() {
      var rawMarkup = converter.makeHtml(this.props.children.toString());
      return (
        &lt;div className="comment panel"&gt;
          &lt;h3 className="commentAuthor"&gt;
            {this.props.author}
          &lt;/h3&gt;
          &lt;span dangerouslySetInnerHTML={{__html: rawMarkup}} /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  React.render(
      &lt;CommentBox url="comments.json" pollInterval={2000} /&gt;,
      document.getElementById('example')
  );
  </code></pre>
  
  <p>HTML file looks like this: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;8R&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;script src="react.js"&gt;&lt;/script&gt;
    &lt;script src="JSXTransformer.js"&gt;&lt;/script&gt;
    &lt;script src="jquery-2.1.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="showdown.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="example"&gt;&lt;/div&gt;
  
  &lt;script type="text/jsx" src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And i have comments.json file with comments:</p>
  
  <pre><code>[
    {"author": "Pete Hunt", "text": "This is one comment"},
    {"author": "Jordan Walker", "text": "This is *another* comment"},
    {"author": "Mary Jane", "text": "My comment is the best comment"},
    {"author": "Peter Parker", "text": "Have you called spider-man?"}
  ]
  </code></pre>
  
  <p>Those comments appear in the list, but when i type my own comment in the comment form and submit it, it does not appear in the list. In Chrome it just blinks for a part of a second and disappears and that's all. I have tried to do it on Webstorm's localhost and on MAMP server and i've gotten the same result.
  What is the problem?</p>