bug

Author: mac

.DS_Store

@@ -26,6 +26,29 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    .todoBody {
+    padding: 50px;
+    background-color: #66CCFF;
+    font-family: sans-serif;
+    }
+    .todoListMain .todoHeader input{
+    padding: 10px;
+    font-size: 16px;
+    border: 2px solid #FFF
+    }
+    .todoListMain .todoHeader button{
+    padding: 10px;
+    font-size: 16px;
+    margin: 10px;
+    background-color: #0066FF;
+    color: #FFF;
+    border: 2px solid #0066FF;
+    }
+    .todoListMain .todoHeader button:hover{
+    background-color: #003399;
+    border: 2px solid #003399;
+    cursor: pointer;
+    }
  }
 }
 

conf/.DS_Store

@@ -1,11 +1,48 @@
 import React, { Component } from 'react';
+import TodoItems from './TodoItems.js';
 
 export default class Content extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: "",
+      item: []
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    console.log(event.target.value);
+    this.setState({ text: event.target.value });
+  }
+   handleAdd() {
+    const itemArray = this.state.items;
+    itemArray.push(
+      {
+        text: this.state.text,
+      }
+    );
+    this.setState({
+    item: itemArray
+    });
+    this.setState({text: ""});
+    console.log(this.state.items);
+  }
   render() {
     return (
       <div className="content">
-        <h1>Hello, We are ReactMaker!</h1>
-        <h2>This is Content Component!</h2>
+        <div className="todoBody">
+          <div className="todoListMain">
+            <div className="todoHeader">
+              <input
+                type="text"
+                value={this.state.text}
+                onChange={this.handleChange}
+              />
+              <button onClick={this.handleAdd}> add </button>
+              <TodoItems entries={this.state.item}/>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

conf/webpack/.DS_Store

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class TodoItems extends Component {
+    static propTypes = {
+        entries: PropTypes.array
+    }
+    render() {
+        const todoEntries = this.props.entries;
+
+        function createTasks(item) {
+            return <li key={item.key}>{item.text}</li>;
+        }
+
+        const listItems = todoEntries.map(createTasks);
+
+        return (
+          <ul className="thelist">
+            {listItems}
+          </ul>
+        );
+    }
+}