From 19a8f6abb9eace809816624cce380fb338244312 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Mon, 27 Sep 2021 20:03:56 +0530
Subject: [PATCH] Fixed react key warnings

no refs

- fixes key warnings from react by cleaning up key references across products and benefits
---
 ghost/portal/src/components/common/ProductsSection.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/ghost/portal/src/components/common/ProductsSection.js b/ghost/portal/src/components/common/ProductsSection.js
index 89ee2f81f1..b216213970 100644
--- a/ghost/portal/src/components/common/ProductsSection.js
+++ b/ghost/portal/src/components/common/ProductsSection.js
@@ -78,7 +78,7 @@ export const ProductsSectionStyles = ({site}) => {
             padding: 0px 4px;
             text-align: center;
         }
-        
+
         .gh-portal-discount-label:before {
             position: absolute;
             content: "";
@@ -537,9 +537,10 @@ function ProductBenefits({product}) {
         return null;
     }
 
-    return product.benefits.map((benefit) => {
+    return product.benefits.map((benefit, idx) => {
+        const key = benefit?.id || `benefit-${idx}`;
         return (
-            <div className="gh-portal-product-benefit">
+            <div className="gh-portal-product-benefit" key={key}>
                 <CheckmarkIcon className='gh-portal-benefit-checkmark' alt=''/>
                 <div className="gh-portal-benefit-title">{benefit.name}</div>
             </div>
@@ -622,7 +623,7 @@ function ProductCard({product}) {
             </div>
 
             {/* Vertical version */}
-            <div className={cardClass + ' vertical'} key={product.id} onClick={(e) => {
+            <div className={cardClass + ' vertical'} key={`${product.id}-vertical`} onClick={(e) => {
                 e.stopPropagation();
                 setSelectedProduct(product.id);
             }}>