#17 react-todo-app : add todo list

react/todo-app/src/App.js

@@ -15,6 +15,7 @@ export default class App extends Component {
         completed: false,
       },
     ],
+    value: "",
   };
 
   btnStyle = {
@@ -39,6 +40,22 @@ export default class App extends Component {
     this.setState({ todoData: newTodoData });
   };
 
+  handleChange = (e) => {
+    this.setState({ value: e.target.value });
+  };
+
+  handlkeSubmit = (e) => {
+    e.preventDefault();
+
+    let newTodo = {
+      id: Date.now(),
+      title: this.state.value,
+      completed: false,
+    };
+
+    this.setState({ todoData: [...this.state.todoData, newTodo], value: "" });
+  };
+
   render() {
     return (
       <div className="container">
@@ -59,6 +76,23 @@ export default class App extends Component {
               </button>
             </div>
           ))}
+
+          <form style={{ display: "flex" }} onSubmit={this.handlkeSubmit}>
+            <input
+              type={"text"}
+              name={"value"}
+              style={{ flex: "10", padding: "5px" }}
+              placeholder={"해야 할 일을 입력하세요."}
+              value={this.state.value}
+              onChange={this.handleChange}
+            />
+            <input
+              type={"submit"}
+              value={"입력"}
+              className={"btn"}
+              style={{ flex: "1" }}
+            />
+          </form>
         </div>
       </div>
     );