From f15ba1b2ac2700fbd9269d64dd370ab4f39ba703 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexkrolick@users.noreply.github.com>
Date: Sun, 17 Mar 2019 21:53:58 -0700
Subject: [PATCH] fix(codetabs): fix key warning (#1284)

- closes #1255
---
 v1/lib/core/CodeTabsMarkdownBlock.js | 45 +++++++++++++++++-----------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/v1/lib/core/CodeTabsMarkdownBlock.js b/v1/lib/core/CodeTabsMarkdownBlock.js
index 3a19a4a8bd..129232c973 100644
--- a/v1/lib/core/CodeTabsMarkdownBlock.js
+++ b/v1/lib/core/CodeTabsMarkdownBlock.js
@@ -28,26 +28,35 @@ class MarkdownBlock extends React.Component {
     return (
       <div className="tabs">
         <div className="nav-tabs">
-          {tabs.map((t, i) => (
-            <div
-              className={`nav-link${i === 0 ? ' active' : ''}`}
-              id={`${t.id}-tab`}
-              data-group={`group_${t.groupId}`}
-              data-tab={`tabpanel_${t.id}`}>
-              {t.label}
-            </div>
-          ))}
+          {tabs.map((t, i) => {
+            const tabId = `tab-group-${groupId}-tab-${t.id}`;
+            const contentId = `tab-group-${groupId}-content-${t.id}`;
+            return (
+              <div
+                id={tabId}
+                key={tabId}
+                className={`nav-link${i === 0 ? ' active' : ''}`}
+                data-group={`group_${t.groupId}`}
+                data-tab={contentId}>
+                {t.label}
+              </div>
+            );
+          })}
         </div>
         <div className="tab-content">
-          {tabs.map((t, i) => (
-            <div
-              className={`tab-pane${i === 0 ? ' active' : ''}`}
-              data-group={`group_${t.groupId}`}
-              tabIndex="-1"
-              id={`tabpanel_${t.id}`}>
-              {t.panelContent}
-            </div>
-          ))}
+          {tabs.map((t, i) => {
+            const id = `tab-group-${groupId}-content-${t.id}`;
+            return (
+              <div
+                id={id}
+                key={id}
+                className={`tab-pane${i === 0 ? ' active' : ''}`}
+                data-group={`group_${t.groupId}`}
+                tabIndex="-1">
+                {t.panelContent}
+              </div>
+            );
+          })}
         </div>
       </div>
     );