fix: React key warning

react-component · Sep 9, 2020 · a0e77da · a0e77da
1 parent 758cce2
commit a0e77da
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/examples/fragment.js b/examples/fragment.js
@@ -8,12 +8,10 @@ export default () => (
       <MenuItem key="1-1">0-1</MenuItem>
       <MenuItem key="1-2">0-2</MenuItem>
     </SubMenu>
-    <MenuItem key="2">
-      Menu Item
-    </MenuItem>
+    <MenuItem key="2">Menu Item</MenuItem>
     <MenuItem key="3">outer</MenuItem>
     <>
-      <SubMenu title="sub menu" key="4">
+      <SubMenu key="4" title="sub menu">
         <MenuItem key="4-1">inner inner</MenuItem>
         <Divider />
         <SubMenu key="4-2" title="sub menu">

diff --git a/src/SubPopupMenu.tsx b/src/SubPopupMenu.tsx
@@ -393,7 +393,10 @@ export class SubPopupMenu extends React.Component<SubPopupMenuProps> {
     if (props.mode === 'inline' || isMobileDevice()) {
       newChildProps.triggerSubMenuAction = 'click';
     }
-    return React.cloneElement(child, newChildProps);
+    return React.cloneElement(child, {
+      ...newChildProps,
+      key: key || i,
+    });
   };
 
   renderMenuItem = (