#17 react-todo-app : completed todo list

react/todo-app/src/App.js

@@ -3,18 +3,7 @@ import "./App.css";
 
 export default class App extends Component {
   state = {
-    todoData: [
-      {
-        id: "1",
-        title: "공부하기",
-        completed: true,
-      },
-      {
-        id: "2",
-        title: "청소하기",
-        completed: false,
-      },
-    ],
+    todoData: [],
     value: "",
   };
 
@@ -27,11 +16,11 @@ export default class App extends Component {
     float: "right",
   };
 
-  getStyle = () => {
+  getStyle = (completed) => {
     return {
       padding: "10px",
       borderBottom: "1px #ccc dotted",
-      textDecoration: "none",
+      textDecoration: completed ? "line-through" : "none",
     };
   };
 
@@ -56,6 +45,17 @@ export default class App extends Component {
     this.setState({ todoData: [...this.state.todoData, newTodo], value: "" });
   };
 
+  handleCompleteChange = (id) => {
+    let newTodoData = this.state.todoData.map((data) => {
+      if (data.id === id) {
+        data.completed = !data.completed;
+      }
+      return data;
+    });
+
+    this.setState({ todoData: newTodoData });
+  };
+
   render() {
     return (
       <div className="container">
@@ -65,8 +65,12 @@ export default class App extends Component {
           </div>
 
           {this.state.todoData.map((data) => (
-            <div style={this.getStyle()} key={data.id}>
-              <input type={"checkbox"} defaultChecked={false} />
+            <div style={this.getStyle(data.completed)} key={data.id}>
+              <input
+                type={"checkbox"}
+                defaultChecked={false}
+                onChange={() => this.handleCompleteChange(data.id)}
+              />
               {data.title}
               <button
                 style={this.btnStyle}