comments list updates

js/components/app.js

@@ -5,24 +5,22 @@ import CommentsForm from './CommentsForm.js';
 class App extends React.Component {
     constructor(props){
         super(props);
+        this.addComment = this.addComment.bind(this);
         this.state = {
             comments: [
-                {
-                    body:'eat'
-                },
-                {
-                    body:'sleep'
-                },
-                {
-                    body:'find shelter'
-                }
             ]
         }
     }
+    addComment(value){
+        this.state.comments.push({ body: value });
+        this.setState({
+            comments: this.state.comments
+        });
+    }
     render() {
         return <section>
             <CommentsList comments={this.state.comments}/>
-            <CommentsForm/>
+            <CommentsForm handleSubmit={this.addComment}/>
         </section>
     }
 }

js/components/commentsForm.js

@@ -1,10 +1,18 @@
 import React from 'react';
 
 class CommentsForm extends React.Component {
+    constructor(props){
+        super(props);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+    handleSubmit(event){
+        event.preventDefault();
+        this.props.handleSubmit(this.refs.body.value);
+    }
     render() {
-        return <form>
+        return <form onSubmit={this.handleSubmit}>
-            <input type="text" placeholder="value"/>
+            <textarea ref="body" type="text" placeholder="Your Comment Here"></textarea>
-            <input type="submit" value="Create Todo"/>
+            <input type="submit" value="Submit Comment"/>
         </form>
     }
 }