FAQ: Each child in a list should have a unique "key" prop

opengento · Feb 3, 2025 · b14b559 · b14b559
1 parent d317da0
commit b14b559
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/src/components/Faq/Faq.tsx b/src/components/Faq/Faq.tsx
@@ -117,13 +117,15 @@ const Faq = ({
   let faqId = 0;
   return (
     <div className={display === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 mb-8 md:mb-12' : ''}>
-      {faqWrap.map((faqItems, index) => (
-        <div className={`flex flex-col gap-4 ${display === 'grid' ? 'md:gap-8' : ''}`} key={index}>
-          {faqItems.map((faq) => (
-            renderFaqItem(faq, faqId++)
-          ))}
-        </div>
-      ))}
+      {faqWrap.map((faqItems, wrapIndex) => (
+          <div className={`flex flex-col gap-4 ${display === 'grid' ? 'md:gap-8' : ''}`} key={`faq-wrap-${wrapIndex}`}>
+            {faqItems.map((faq) => (
+              <div key={`faq-item-${faq.question}`}>
+                {renderFaqItem(faq, faqId++)}
+              </div>
+            ))}
+          </div>
+        ))}
     </div>
   );
 }