Add a state component

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

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

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>