#17 react-todo-app : delete todo list

react/todo-app/src/App.js

@@ -2,6 +2,21 @@ import React, { Component } from "react";
 import "./App.css";
 
 export default class App extends Component {
+  state = {
+    todoData: [
+      {
+        id: "1",
+        title: "공부하기",
+        completed: true,
+      },
+      {
+        id: "2",
+        title: "청소하기",
+        completed: false,
+      },
+    ],
+  };
+
   btnStyle = {
     color: "#fff",
     border: "none",
@@ -19,18 +34,10 @@ export default class App extends Component {
     };
   };
 
-  todoData = [
-    {
-      id: "1",
-      title: "공부하기",
-      completed: true,
-    },
-    {
-      id: "2",
-      title: "청소하기",
-      completed: false,
-    },
-  ];
+  handleClick = (id) => {
+    let newTodoData = this.state.todoData.filter((data) => data.id !== id);
+    this.setState({ todoData: newTodoData });
+  };
 
   render() {
     return (
@@ -40,11 +47,16 @@ export default class App extends Component {
             <h1>할 일 목록</h1>
           </div>
 
-          {this.todoData.map((data) => (
+          {this.state.todoData.map((data) => (
             <div style={this.getStyle()} key={data.id}>
               <input type={"checkbox"} defaultChecked={false} />
               {data.title}
-              <button style={this.btnStyle}>x</button>
+              <button
+                style={this.btnStyle}
+                onClick={() => this.handleClick(data.id)}
+              >
+                x
+              </button>
             </div>
           ))}
         </div>