fix(codetabs): fix key warning

- closes #1255
facebook · Mar 17, 2019 · 4ca8040 · 4ca8040
1 parent 93e2b7d
commit 4ca8040
Showing 1 changed file with 26 additions and 18 deletions.
diff --git a/v1/lib/core/CodeTabsMarkdownBlock.js b/v1/lib/core/CodeTabsMarkdownBlock.js
@@ -28,26 +28,34 @@ 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 id = `tab-group-${groupId}-tab-${t.id}-${i}`;
+ return (
+ <div
+ id={id}
+ key={id}
+ className={`nav-link${i === 0 ? ' active' : ''}`}
+ data-group={`group_${t.groupId}`}
+ data-tab={`tabpanel_${t.id}`}>
+ {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}-${i}`;
+ return (
+ <div
+ id={id}
+ key={id}
+ className={`tab-pane${i === 0 ? ' active' : ''}`}
+ data-group={`group_${t.groupId}`}
+ tabIndex="-1">
+ {t.panelContent}
+ </div>
+ );
+ })}
  </div>
  </div>
  );