diff --git a/src/App.jsx b/src/App.jsx
index c869b09..601747e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,11 +3,26 @@ import TodoList from './TodoList.jsx'
 import TodoAddForm from './TodoAddForm.jsx'
 
 class TodoApp extends React.Component {
+  state = {
+    todos: [],
+  }
+  addTodo = (data) => {
+    let todos = [...this.state.todos, data]
+    this.setState({ todos })
+  }
+
+  removeTodo = (index) => {
+    let todos = [...this.state.todos];
+    todos.splice(index, 1);
+    this.setState({ todos });
+  }
+
   render() {
     return (
       <div>
         <h2>Todo App</h2>
-        123
+        <TodoAddForm addTodo={this.addTodo} />
+        <TodoList removeTodo={this.removeTodo} todos={this.state.todos}/>
       </div>
     );
   }
diff --git a/src/TodoAddForm.jsx b/src/TodoAddForm.jsx
index fbf6003..699b3a1 100644
--- a/src/TodoAddForm.jsx
+++ b/src/TodoAddForm.jsx
@@ -4,12 +4,22 @@ class TodoAddForm extends React.Component {
   state = {
     inputText: ''
   }
+
+  onChange = (event) => {
+    this.setState({
+      inputText: event.target.value,
+    });
+  }
+
+  addTodo = () => {
+    this.props.addTodo(this.state.inputText);
+  }
   
   render() {
     return (
       <div>
-        <input type="text" value={this.state.inputText}/>
-        <button>新增</button>
+        <input type="text" value={this.state.inputText} onChange={this.onChange}/>
+        <button onClick={this.addTodo}>新增</button>
       </div>
     );
   }
diff --git a/src/TodoItem.jsx b/src/TodoItem.jsx
index 170af86..5351773 100644
--- a/src/TodoItem.jsx
+++ b/src/TodoItem.jsx
@@ -4,7 +4,8 @@ class TodoItem extends React.Component {
   render() {
     return (
       <div>
-        
+        <button onClick={this.props.remove}>刪除</button>
+        {this.props.data}
       </div>
     );
   }
diff --git a/src/TodoList.jsx b/src/TodoList.jsx
index d588dc4..aefb6bb 100644
--- a/src/TodoList.jsx
+++ b/src/TodoList.jsx
@@ -5,10 +5,17 @@ class TodoList extends React.Component {
   render() {
     return (
       <div>
-        
+        {
+          this.props.todos.map((data, index) => {
+            return <TodoItem data={data} remove={() => this.props.removeTodo(index)}/>
+          })
+        }
       </div>
     );
   }
 }
+TodoList.defaultProps = {
+  todos: [1,2,3,4,5,6]
+}
 
 export default TodoList;
\ No newline at end of file