fix: Description children missing key

components/descriptions/__tests__/hooks.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Descriptions from '..';
+import { render } from '../../../tests/utils';
+import useBreakpoint from '../../grid/hooks/useBreakpoint';
+import useItems from '../hooks/useItems';
+
+describe('Descriptions.Hooks', () => {
+  it('Should Descriptions not throw react key prop error in jsx mode', () => {
+    const Demo = () => {
+      const screens = useBreakpoint();
+      const items = useItems(
+        screens,
+        undefined,
+        <Descriptions.Item key="bamboo" label="UserName">
+          Bamboo
+        </Descriptions.Item>,
+      );
+
+      return <p>{(items[0] as any).key}</p>;
+    };
+
+    const { container } = render(<Demo />);
+    expect(container.querySelector('p')?.textContent).toBe('bamboo');
+  });
+});

components/descriptions/hooks/useItems.ts

@@ -6,7 +6,7 @@ import { matchScreen, type ScreenMap } from '../../_util/responsiveObserver';
 
 // Convert children into items
 const transChildren2Items = (childNodes?: React.ReactNode) =>
-  toArray(childNodes).map((node) => ({ ...node?.props }));
+  toArray(childNodes).map((node) => ({ ...node?.props, key: node.key }));
 
 export default function useItems(
   screens: ScreenMap,