From 051a874a4b79b31fd0d7382f77d62ea322908995 Mon Sep 17 00:00:00 2001
From: Jerry Zhang <jinxuan0920@gmail.com>
Date: Sat, 6 Jul 2024 21:57:43 -0400
Subject: [PATCH] Update page.tsx

---
 app/page.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index 6f206c3..336fe9c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -42,16 +42,19 @@ export default function Home() {
 
   const rentals = [
     {
+      id: "volter-electric-bike",
       name: "Volter Electric Bike",
       price: "CA $10/hr",
       itemDisplay: "/img/bike-display.png",
     },
     {
+      id: "voltskate-electric-skateboard",
       name: "VoltSkate Electric Skateboard",
       price: "CA $10/hr",
       itemDisplay: "/img/skateboard-display.png",
     },
     {
+      id: "electric-one-wheel",
       name: "Electric One-Wheel",
       price: "CA $10/hr",
       itemDisplay: "/img/one-wheel-display.png",
@@ -81,7 +84,7 @@ export default function Home() {
               <h2 className="text-3xl font-semibold text-left mb-8 text-gray-800">Rentals</h2>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 {rentals.map((item, index) => (
-                    <ProductDisplay key={index} itemDisplay={item.itemDisplay} name={item.name} price={item.price} />
+                    <ProductDisplay key={index} id={item.id} itemDisplay={item.itemDisplay} name={item.name} price={item.price} />
                 ))}
               </div>
             </section>