From 3eabcba073b0b6140df23655a00c8581d599613d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 28 Apr 2022 22:23:06 +0800
Subject: [PATCH] fix: Space duplicated key warning (#35311)

close #35305
---
 components/space/__tests__/index.test.js | 21 +++++++++++++++++++++
 components/space/index.tsx               |  5 ++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/components/space/__tests__/index.test.js b/components/space/__tests__/index.test.js
index ecb19ff0bb..b811ff34a5 100644
--- a/components/space/__tests__/index.test.js
+++ b/components/space/__tests__/index.test.js
@@ -172,4 +172,25 @@ describe('Space', () => {
 
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/35305
+  it('should not throw duplicated key warning', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    mount(
+      <Space>
+        <div key="1" />
+        <div />
+        <div key="3" />
+        <div />
+      </Space>,
+    );
+    // eslint-disable-next-line no-console
+    expect(console.error).not.toHaveBeenCalledWith(
+      expect.stringContaining('Encountered two children with the same key'),
+      expect.anything(),
+      expect.anything(),
+    );
+    // eslint-disable-next-line no-console
+    console.error.mockRestore();
+  });
 });
diff --git a/components/space/index.tsx b/components/space/index.tsx
index 9c0b7f5e4f..30535b2218 100644
--- a/components/space/index.tsx
+++ b/components/space/index.tsx
@@ -89,11 +89,14 @@ const Space: React.FC<SpaceProps> = props => {
     }
 
     const keyOfChild = child && child.key;
+    // Add `-space-item` as suffix in case simple key string trigger duplicated key warning
+    // https://github.com/ant-design/ant-design/issues/35305
+    const defaultKey = `${i}-space-item`;
 
     return (
       <Item
         className={itemClassName}
-        key={`${itemClassName}-${keyOfChild || i}`}
+        key={`${itemClassName}-${keyOfChild || defaultKey}`}
         direction={direction}
         index={i}
         marginDirection={marginDirection}