update 27/01

src/components/shared/ProductItem.tsx

@@ -3,13 +3,21 @@ import Link from "next/link";
 import { formatPrice  } from "@/lib/utils";
 import { useProductItem } from "@/hooks/useProductItem"
 import { useCart } from '@/hooks/useCart';
+import { useEffect, useState } from "react";
 
 export default function ProductItem({item}:any){
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);    
+
     const product = useProductItem(item);
-    if (!product) return null;
 
     const { addToCart, isInCart } = useCart();
 
+    if (!mounted || !product) return null;
+
     const {
         productId,
         productUrl,
@@ -123,7 +131,8 @@ export default function ProductItem({item}:any){
                                 </p>
 
                                 <div className="tooltip-spec">
-                                    <div dangerouslySetInnerHTML={{ __html: displaySummary }}/>
+                                    <div suppressHydrationWarning 
+                                         dangerouslySetInnerHTML={{ __html: displaySummary }}/>
                                 </div>
                             </div>
                         }
@@ -136,7 +145,8 @@ export default function ProductItem({item}:any){
                                 </p>
 
                                 <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
-                                    <div dangerouslySetInnerHTML={{ __html: displayOffer }}/>
+                                    <div suppressHydrationWarning 
+                                        dangerouslySetInnerHTML={{ __html: displayOffer }}/>
                                 </div>
                             </div>
                         }