diff --git a/src/App.jsx b/src/App.jsx
index c869b09..e18f1be 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,12 +2,34 @@ import React from 'react'
 import TodoList from './TodoList.jsx'
 import TodoAddForm from './TodoAddForm.jsx'
 
+const todos = [];
+
 class TodoApp extends React.Component {
+  state = {
+    todos: []
+  }
+
+  addTodo = (val) => {
+    this.setState({
+      todos: this.state.todos.concat(val),
+    });
+    console.log(this.state);
+  }
+
+  deleteTodo = (index) => {
+    console.log('index:', index);
+    console.log(this.state.todos.splice(index, 1)); //Array.splice(start, deleteCount) return an array containing the deleted elements
+    this.setState({
+      todos: this.state.todos
+    });
+  }
+
   render() {
     return (
       <div>
         <h2>Todo App</h2>
-        123
+        <TodoAddForm addTodo={this.addTodo} />
+        <TodoList todos={this.state.todos} delTodo={this.deleteTodo} />
       </div>
     );
   }
diff --git a/src/TodoAddForm.jsx b/src/TodoAddForm.jsx
index fbf6003..cadf2ac 100644
--- a/src/TodoAddForm.jsx
+++ b/src/TodoAddForm.jsx
@@ -1,15 +1,32 @@
 import React from 'react'
 
+
 class TodoAddForm extends React.Component {
-  state = {
-    inputText: ''
+  constructor(props) {
+    super(props);
+    this.state = { inputText: '' };
   }
   
+  handleChange = (e) => {
+    this.setState({
+      inputText: e.target.value
+    });
+    console.log('input value', e.target.value);
+    console.log('inputText', this.state.inputText);
+  }
+
+  addTodo = (e) => {
+    this.props.addTodo(this.state.inputText);
+    this.setState({
+      inputText: ''
+    })
+  }
+
   render() {
     return (
       <div>
-        <input type="text" value={this.state.inputText}/>
-        <button>新增</button>
+        <input type="text" value={this.state.inputText} onChange={this.handleChange}/>
+        <button onClick={this.addTodo} >新增</button>
       </div>
     );
   }
diff --git a/src/TodoItem.jsx b/src/TodoItem.jsx
index 170af86..b54016b 100644
--- a/src/TodoItem.jsx
+++ b/src/TodoItem.jsx
@@ -1,10 +1,16 @@
 import React from 'react'
 
 class TodoItem extends React.Component {
+
+  deleteTodo = () => {
+    this.props.delTodo(this.props.index);
+    //console.log('TodoItem index:', this.props.index);
+  };
+
   render() {
     return (
       <div>
-        
+          <li>{this.props.value}<button onClick={this.deleteTodo}>Delete</button></li>
       </div>
     );
   }
diff --git a/src/TodoList.jsx b/src/TodoList.jsx
index d588dc4..22dd0a1 100644
--- a/src/TodoList.jsx
+++ b/src/TodoList.jsx
@@ -5,7 +5,9 @@ class TodoList extends React.Component {
   render() {
     return (
       <div>
-        
+        {this.props.todos.map((value, index) => (
+          <TodoItem key={index} index={index} value={value} delTodo={this.props.delTodo} />
+        ))}
       </div>
     );
   }