Add files via upload

App.js

@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+
+  constructor(props) {
+    super(props)
+
+    // Use these state variables to save the user comment and store a list of previously added comments
+    this.state = {
+      comment: '',
+      messages: [],
+    }
+  }
+
+  componentDidMount() {
+    this.setState({ comment: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisee gravida sem sit amet molestie porttitor." })
+  }
+
+  handleSubmit = () => {
+
+    var myDate = new Date();
+
+    const {messages} = this.state;
+
+    var myDate = myDate.toLocaleDateString();
+
+    messages.push({
+      message_value: this.state.comment,
+      message_author: "Jack Smith",
+      message_photo: "https://api.adorable.io/avatars/285/avatar_user_3.png",
+      message_timestamp: myDate
+    })
+
+    this.setState({messages:messages})
+    console.log(this.state.comment)
+    // Modify this function to handle user submissions and update state
+  }
+
+  handleInputChange(e) {
+    e.persist()
+
+    var name = e.target.name
+    var value = e.target.value
+    this.setState((prevState) => {
+      return {
+        [name]: value,
+      }
+    })
+
+  }
+
+  render() {
+    const {messages} = this.state;
+
+    const messagesTable = messages.map(function (item) {
+      return (
+        <li className="comment author-comment">
+
+        <div className="info">
+          <a href="#">Jack Smith</a>
+          <span>{item.message_timestamp}</span>
+        </div>
+
+        <a className="avatar" href="#">
+          <img src="https://api.adorable.io/avatars/285/avatar_user_3.png" width="35" alt="Profile Avatar" title="Jack Smith" />
+        </a>
+
+        <p>{item.message_value}</p>
+
+
+      </li>
+
+      )
+    })
+    return (
+      <div classNameName="App">
+        <ul className="comment-section">
+
+          {/* Replace the contents of comment-section with the appended list of user comments */}
+
+
+          <li className="comment author-comment">
+
+            <div className="info">
+              <a href="#">Jack Smith</a>
+              <span>1 hour ago</span>
+            </div>
+
+            <a className="avatar" href="#">
+              <img src="https://api.adorable.io/avatars/285/avatar_user_3.png" width="35" alt="Profile Avatar" title="Jack Smith" />
+            </a>
+
+            <p>Random comment goes here</p>
+
+          </li>
+{messagesTable}
+          <li className="write-new">
+
+            <form>
+
+              <textarea placeholder="Write your comment here" name="comment" onChange={evt => this.handleInputChange(evt)}></textarea>
+
+              <div>
+                <img src="https://api.adorable.io/avatars/285/avatar_user_4.png" width="35" alt="Profile of Bradley Jones" title="Bradley Jones" />
+                <button type="button" onClick={this.handleSubmit}>Submit</button>
+              </div>
+
+            </form>
+
+          </li>
+
+        </ul>
+
+        <footer>
+          <a href="http://tutorialzine.com/2015/11/using-flexbox-to-create-a-responsive-comment-section/">Inspired by this tutorial</a>
+        </footer>
+      </div>
+    );
+  }
+}
+
+export default App;