import React from 'react';
import './App.css';
//import CommentForm from './components/commentform/commentform';

class App extends React.Component {
  constructor() {
    super();
    this.addComment = this.addComment.bind(this);
    this.state = {
      feedback: {}
    };
  }

  addComment = (comment) => {
    this.setState({
      feedback: [...this.state.feedback, comment]
    });
  }

  render() {
    return (
      <CommentForm comments={this.addComment} />
    )
  }
}

class CommentForm extends React.Component {
  createComment(event) {
    event.preventDefault();
    const comment = {
      name: this.name.value
    }
    this.props.addComment(comment);
  }
  render() {
    return (

      <form className="comment-form" onSubmit={(e) => this.addComment(e)}>
        <h3>Enter your feedback</h3>
        <input ref={(input) => this.name = input} type="text" placeholder="Name" />
        <button type="submit">+ Add Comment</button>
      </form>
    )
  }
}

export default App;