diff --git a/src/components/AddTodo.js b/src/components/AddTodo.js
new file mode 100644
index 0000000..927ca0c
--- /dev/null
+++ b/src/components/AddTodo.js
@@ -0,0 +1,31 @@
+import React from 'react'
+
+class AddTodo extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = props
+  }
+
+  handleClick(e) {
+    var node = this.refs.input
+    var text = node.value.trim()
+    this.state.onAddClick(text)
+    node.value = ''
+  }
+
+  render() {
+    return (
+      <div>
+        <input type='text' ref='input' />
+        <button onClick={() => {
+          this.handleClick()
+        }}>
+          Add
+        </button>
+      </div>
+    );
+  }
+}
+
+
+export default AddTodo
\ No newline at end of file
diff --git a/src/components/TodoApp.js b/src/components/TodoApp.js
index 6f626bb..b8a41bb 100644
--- a/src/components/TodoApp.js
+++ b/src/components/TodoApp.js
@@ -1,11 +1,26 @@
 import React from 'react'
+import TodoList from '../components/TodoList'
+import AddTodo from '../components/AddTodo'
 
-import TodoList from './TodoList'
+class TodoApp extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = props
+  }
 
-export default function TodoApp(props) {
-  return (
-    <div className="todoApp">
-      <TodoList data={props.data}/>
-    </div>
-  )
+  render() {
+    return (
+      <div className="todoApp">
+        <AddTodo
+        onAddClick={ (text) => {
+          let todos = this.state.data
+          todos.push({id: Date.now(), text: text, completed: 0})
+          this.setState({data: todos})
+        }}/>
+        <TodoList todos={this.state.data}/>
+      </div>
+    )    
+  }
 }
+
+export default TodoApp
\ No newline at end of file
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index fde395c..e86d1aa 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -6,7 +6,7 @@ export default function TodoList(props) {
   return (
     <div className="TodoList">
       <ul>
-        {props.data.map(function(todo) {
+        {props.todos.map(function(todo) {
           return <Todo key={todo.id} completed={todo.completed} text={todo.text} />
         })}
       </ul>