Render addon panels inside a fragment with key to remove warnings

lib/components/package.json

@@ -24,7 +24,8 @@
     "react-emotion": "^9.1.3",
     "react-inspector": "^2.3.0",
     "react-split-pane": "^0.1.77",
-    "react-textarea-autosize": "^6.1.0"
+    "react-textarea-autosize": "^6.1.0",
+    "render-fragment": "^0.1.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "4.0.0-alpha.8",

lib/components/src/tabs/tabs.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+
+import Fragment from 'render-fragment';
 import PropTypes from 'prop-types';
 import styled from 'react-emotion';
 
@@ -136,14 +138,15 @@ export const Tabs = ({ panels, selectedPanel, onPanelSelect, absolute, bordered
         ))}
       </TabBar>
       <Content absolute={absolute}>
-        {list.map(([name, { render }]) =>
-          render({
-            key: name,
-            active: name === selectedPanel,
-            selected: selectedPanel,
-            role: 'tabpanel',
-          })
-        )}
+        {list.map(([name, { render }]) => (
+          <Fragment key={name}>
+            {render({
+              active: name === selectedPanel,
+              selected: selectedPanel,
+              role: 'tabpanel',
+            })}
+          </Fragment>
+        ))}
       </Content>
     </Wrapper>
   ) : (

yarn.lock

@@ -14947,6 +14947,10 @@ remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
 
+render-fragment@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/render-fragment/-/render-fragment-0.1.1.tgz#b231f259b7eee333d34256aee0ef3169be7bef30"
+
 renderkid@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.1.tgz#898cabfc8bede4b7b91135a3ffd323e58c0db319"