testing lists

src/App.tsx

@@ -1,9 +1,20 @@
-const welcome = "Hello there!"
+const products = [
+    { title: 'Cabbage', id: 1 },
+    { title: 'Garlic', id: 2 },
+    { title: 'Apple', id: 3 },
+];
 
 function App() {
+    const listItems = products.map(product =>
+        <li key={product.id}>
+            {product.title}
+        </li>
+    );
+
     return (
         <div className="mx-auto flex flex-col items-center space-y-4 text-white">
-            <p className="text-3xl">{welcome}</p>
+            <h1 className="text-2xl">Shopping list</h1>
+            <ul className="list-disc">{listItems}</ul>
         </div>
     )
 }