Adding new todos

public/index.html

@@ -10,4 +10,4 @@
     </noscript>
     <div id="root"></div>
   </body>
-</html>
+</html>

src/App.js

@@ -12,16 +12,36 @@ class App extends Component {
     ]
   };
 
+  handleChange = event => {
+    this.setState({ newTodo: event.target.value });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault()
+    this.setState({
+      todos: [...this.state.todos, this.state.newTodo],
+      newTodo: ""
+    });
+  };
+
   render() {
     return (
       <div>
         <h1> How to make boba at home</h1>
         {this.state.todos.map(todo => (
           <li key={todo}> {todo}</li>
         ))}
+        <form onSubmit={this.handleSubmit}>
+          <input
+            type="text"
+            value={this.state.newTodo}
+            onChange={this.handleChange}
+          />
+          <button onClick={this.handleSubmit}> + </button>
+        </form
       </div>
     );
   }
 }
 
-export default App;
+export default App;

src/index.js

@@ -2,4 +2,4 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js'
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));