tutorial complete - time for troubleshooting

Author: kyleturco

public/index.html

@@ -31,6 +31,23 @@
             }.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: []};
         },
@@ -66,16 +83,6 @@ <h1>Comments</h1>
         }
       });
 
-      var CommentForm = React.createClass({
-        render: function () {
-          return (
-            <div className="commentForm">
-              Hello, world! I am a CommentForm
-            </div>
-          );
-        }
-      });
-
       var Comment = React.createClass({
         rawMarkup: function () {
           var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
@@ -94,7 +101,29 @@ <h2 className="commentAuthor">
         }
       });
 
-
+      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})
+          React.findDOMNode(this.refs.author).value = '';
+          React.findDOMNode(this.refs.text).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="text" />
+              <input type="submit" value="Post" />
+            </form>
+          );
+        }
+      });
 
       React.render(
         <CommentBox url="/api/comments" pollInterval={2000} />