import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      comments: [
        {
          name: 'Pete Hunt',
          message: 'this is one comment'
        },
        {
          name: 'Jordan Walke',
          message: 'this is another comment'
        }
      ]
    }
    this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
  }

  handleCommentSubmit(comment) {
    let {comments} = this.state;
    const newComments = comments.concat([comment]);
    this.setState({
      comments: newComments
    })
  }

  render() {
    return (
      <div>
        <h1>Comments</h1>
        <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
        <CommentList comments={this.state.comments}/>
      </div>
    );
  }
}

class CommentForm extends Component {

  constructor(props) {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    let name = ReactDOM.findDOMNode(this.refs.name).value.trim();
    let message = ReactDOM.findDOMNode(this.refs.message).value.trim();

    if(!message || !name) {
      return;
    }

    this.props.onCommentSubmit({name: name, message: message});
    ReactDOM.findDOMNode(this.refs.name).value = '';
    ReactDOM.findDOMNode(this.refs.message).value = '';
    return;
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <input type="text" placeholder="Your name" ref="name" />
        </div>
        <div>
          <input type="text" placeholder="Say something" ref="message" />
        </div>
        <div>
          <input type="submit" value="Post" />
        </div>

      </form>
    )
  }
}

class CommentList extends Component {

  render() {

    const {comments} = this.props;

    let commentNodes = comments.map((comment, i) => {
      return(
        <Comment name={comment.name} key={i}>
          {comment.message}
        </Comment>
      )
    });

    return (
      <div>
        {commentNodes}
      </div>
    )
  }
}

class Comment extends Component {
  render() {
    return(
      <div>
        <h3>{this.props.name}</h3>
        <p>
          {this.props.children}
        </p>
      </div>
    )
  }
}

@@ -929,192 +929,373 @@
 ();%0A
-    this.handleSubmit = this.handleSubmit.bind(this);%0A  %7D%0A%0A  handleSubmit(e) %7B%0A    e.preventDefault();%0A    let 
+%0A    this.state = %7B%0A      name: '',%0A      message: '',%0A      error: ''%0A    %7D%0A%0A    this.handleSubmit = this.handleSubmit.bind(this);%0A    this.handleFieldChange = this.handleFieldChange.bind(this);%0A  %7D%0A%0A  handleFieldChange(e) %7B%0A    this.setState(%7B%0A      %5Be.target.
 name
- = ReactDOM.findDOMNode(this.refs.name).value.trim
+%5D: e.target.value%0A    %7D)%0A  %7D%0A%0A  handleSubmit(e) %7B%0A    e.preventDefault
 ();%0A
+%0A
     
-let
+const %7Bname,
  message
  = R
@@ -1294,93 +1294,148 @@
 sage
+%7D
  = 
-ReactDOM.findDOMNode(this.refs.message).value.trim();%0A%0A    if(!message %7C%7C !name) %7B
+this.state;%0A%0A    if(!message.trim() %7C%7C !name.trim()) %7B%0A      this.setState(%7B%0A        error: 'You must enter a name and message'%0A      %7D)
 %0A   
@@ -1488,36 +1488,34 @@
 it(%7B
-name: name, message:
+%0A      name,%0A     
  message
 %7D);%0A
@@ -1514,132 +1514,96 @@
 sage
+%0A    
 %7D);%0A
+%0A
     
-ReactDOM.findDOMNode(this.refs.name).value = '';%0A    ReactDOM.findDOMNode(this.refs.message).value = '';
+this.setState(%7B%0A      message: '',%0A      name: '',
 %0A    
-return;
+  error: ''%0A    %7D)%0A
 %0A  %7D
@@ -1684,42 +1684,199 @@
     
-%3Cdiv%3E%0A          %3Cinput type=%22text%22
+%7Bthis.state.error%7D%0A        %3Cdiv%3E%0A          %3Cinput%0A            type=%22text%22%0A            name=%22name%22%0A            value=%7Bthis.state.name%7D%0A            onChange=%7Bthis.handleFieldChange%7D%0A           
  pla
@@ -1899,19 +1899,18 @@
 ame%22
- ref=%22name%22
+%0A         
  /%3E%0A
@@ -1954,28 +1954,164 @@
   %3Cinput
- type=%22text%22
+%0A            type=%22text%22%0A            name=%22message%22%0A            value=%7Bthis.state.message%7D%0A            onChange=%7Bthis.handleFieldChange%7D%0A           
  placeho
@@ -2134,22 +2134,18 @@
 ing%22
- ref=%22message%22
+%0A         
  /%3E%0A

change to controlled inputs and no refs