delete items

package.json

@@ -9,7 +9,8 @@
     "react-redux": "^7.1.1",
     "react-scripts": "3.2.0",
     "redux": "^4.0.4",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "uuid": "^3.3.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/cards/Cards.js

@@ -1,26 +1,54 @@
 import React, { useState } from 'react';
 import Item from '../Items/Items.js';
 import NewItem from '../NewItem/NewItem.js'
+import uuid from "uuid";
 
 export default function Cards({}) {
 
-  const [item, setItem] = useState(['']);
+  const [item, setItem] = useState([
+            {
+                title: "item 1",
+                completed: true,
+                id: uuid.v4()
+            },
+            {
+                title: "item 2",
+                completed: true,
+                id: uuid.v4()
+            },
+            {
+                title: "item 3",
+                completed: false,
+                id: uuid.v4()
+            }
+        ]);
 
         const addItem = title => {
-          const newItem = [...item, {title, completed: false}];
+          const newItem = [...item, {title, completed: false, id: uuid.v4()}];
           setItem(newItem)
         }
+        const deleteItem = id => {
+          const deleted = item.reduce((acc, current) => {
+            if(current.id !== id){
+              return [...acc, current];
+            }
+            return [...acc, {...current, completed: true}]
+          }, [])
+          setItem(deleted)
+        }
 
-  return (
+        return (
-    <div>
+          <>
-      {item.map((item, index) => (
+            {item.map((i, index) => (
-                      <Item
+                            <div key={i.id}>
-                          item={item}
+                              <Item
-                          index={index}
+                                  item={i}
-                          key={index}
+                                  index={index}
-                      />
+                              />
-                  ))}
+                                <button onClick={() => deleteItem(i.id) }>x</button>
-      <NewItem addItem={addItem} />
+                            </div>
-    </div>
+                        ))}
-  )
+            <NewItem addItem={addItem} />
-}
+          </>
+        )
+      }

src/deleteItem/DeleteItem.js

@@ -0,0 +1,12 @@
+import React, {useState} from 'react';
+
+export default function DeleteItem({ deleteItem }) {
+
+  const handleClick = e => {
+    deleteItem(value);
+    setValue("");
+  }
+  return (
+    <button onClick={handleClick}>x</button>
+  )
+}

yarn.lock

@@ -10045,7 +10045,7 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
-uuid@^3.0.1, uuid@^3.3.2:
+uuid@^3.0.1, uuid@^3.3.2, uuid@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
   integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==