add click for deleting items

Author: rowantseng

react-es6-spread-operator-practice/src/components/App.jsx

@@ -19,6 +19,14 @@ function App() {
     setItem("");
   }
 
+  function deleteItem(id) {
+    addItems((prevValue) => {
+      return prevValue.filter((item, idx) => {
+        return idx !== id;
+      });
+    });
+  }
+
   return (
     <div className="container">
       <div className="heading">
@@ -32,8 +40,8 @@ function App() {
       </div>
       <div>
         <ul>
-          {items.map((i) => (
-            <Items text={i} />
+          {items.map((item, idx) => (
+            <Items key={idx} id={idx} text={item} checked={deleteItem} />
           ))}
         </ul>
       </div>

react-es6-spread-operator-practice/src/components/Items.jsx

@@ -1,19 +1,14 @@
-import React, { useState } from "react";
+import React from "react";
 
 function Items(props) {
-  const [isClick, setClick] = useState(false);
-
-  function handleClick() {
-    setClick((prevValue) => {
-      return !prevValue;
-    });
-  }
-
+  // call `props.checked` function when click
   return (
-    <div onClick={handleClick}>
-      <li style={{ textDecoration: isClick ? "line-through" : "none" }}>
-        {props.text}
-      </li>
+    <div
+      onClick={() => {
+        props.checked(props.id);
+      }}
+    >
+      <li>{props.text}</li>
     </div>
   );
 }