reactive state: remove item from list

src/App.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 const products = [
     { title: 'Cabbage', isFruit: false, id: 1 },
     { title: 'Garlic', isFruit: false, id: 2 },
@@ -5,8 +7,14 @@ const products = [
 ];
 
 function App() {
-    const listItems = products.map(product =>
-        <li 
+    const [items, setItems] = useState(products);
+
+    function remove(id:number) {
+        setItems(items.filter((item) => item.id !== id))
+    }
+
+    const list = items.map(product =>
+        <li onClick={() => remove(product.id)}
             key={product.id}
             className={product.isFruit ? 'text-green-200' : 'text-red-200'}>
             {product.title}
@@ -16,7 +24,7 @@ function App() {
     return (
         <div className="mx-auto flex flex-col items-center space-y-4 text-white">
             <h1 className="text-2xl">Shopping list</h1>
-            <ul className="list-disc">{listItems}</ul>
+            <ul className="list-disc">{list}</ul>
         </div>
     )
 }