fix(codetabs): fix key warning (#1284)

- closes #1255
This commit is contained in:
Alex Krolick 2019-03-17 21:53:58 -07:00 committed by Yangshun Tay
parent 93e2b7dab3
commit f15ba1b2ac

View file

@ -28,26 +28,35 @@ class MarkdownBlock extends React.Component {
return ( return (
<div className="tabs"> <div className="tabs">
<div className="nav-tabs"> <div className="nav-tabs">
{tabs.map((t, i) => ( {tabs.map((t, i) => {
<div const tabId = `tab-group-${groupId}-tab-${t.id}`;
className={`nav-link${i === 0 ? ' active' : ''}`} const contentId = `tab-group-${groupId}-content-${t.id}`;
id={`${t.id}-tab`} return (
data-group={`group_${t.groupId}`} <div
data-tab={`tabpanel_${t.id}`}> id={tabId}
{t.label} key={tabId}
</div> className={`nav-link${i === 0 ? ' active' : ''}`}
))} data-group={`group_${t.groupId}`}
data-tab={contentId}>
{t.label}
</div>
);
})}
</div> </div>
<div className="tab-content"> <div className="tab-content">
{tabs.map((t, i) => ( {tabs.map((t, i) => {
<div const id = `tab-group-${groupId}-content-${t.id}`;
className={`tab-pane${i === 0 ? ' active' : ''}`} return (
data-group={`group_${t.groupId}`} <div
tabIndex="-1" id={id}
id={`tabpanel_${t.id}`}> key={id}
{t.panelContent} className={`tab-pane${i === 0 ? ' active' : ''}`}
</div> data-group={`group_${t.groupId}`}
))} tabIndex="-1">
{t.panelContent}
</div>
);
})}
</div> </div>
</div> </div>
); );