From 62c99bf6e6e9ea928d3abf87c7d61fb1178f5850 Mon Sep 17 00:00:00 2001
From: Prakhar Mishra <164781782+prakhaaar@users.noreply.github.com>
Date: Sat, 7 Sep 2024 23:15:30 +0530
Subject: [PATCH] Update script.js

---
 .../final-code/script.js                      | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/08_rendering-list-of-elements/final-code/script.js b/08_rendering-list-of-elements/final-code/script.js
index 4f7f551..26a2d7c 100644
--- a/08_rendering-list-of-elements/final-code/script.js
+++ b/08_rendering-list-of-elements/final-code/script.js
@@ -20,21 +20,20 @@ function Card(key, title, image, brand, price) {
 const root = createRoot(document.getElementById('root'))
 
 console.log('Hello world!!!')
-
 fetch('https://dummyjson.com/products')
   .then((res) => res.json())
   .then((data) => {
     root.render(
-      <div className="container">
-        {data.products.map((product) => {
-          return Card(
-            product.id,
-            product.title,
-            product.thumbnail,
-            product.brand,
-            product.price
-          )
-        })}
+      <div className="cont">
+        {data.products.map((product) => ( // The arrow function implicitly returns the Card component, making the code more concise and readable.
+          <Card 
+            key={product.id}        // Adding the key={product.id} helps React with efficient reconciliation when updating the list.
+            title={product.title}
+            image={product.thumbnail}
+            brand={product.brand}
+            price={product.price}
+          />
+        ))}
       </div>
-    )
-  })
+    );
+  });