chore: update demo

components/list/demo/basic.tsx

@@ -4,15 +4,19 @@ import { Avatar, List } from 'antd';
 const data = [
   {
     title: 'Ant Design Title 1',
+    key: 1,
   },
   {
     title: 'Ant Design Title 2',
+    key: 2,
   },
   {
     title: 'Ant Design Title 3',
+    key: 3,
   },
   {
     title: 'Ant Design Title 4',
+    key: 4,
   },
 ];
 

components/list/demo/component-token.tsx

@@ -49,6 +49,7 @@ const App: React.FC = () => (
       footer={<div>Footer</div>}
       bordered
       dataSource={data}
+      rowKey={(item) => item}
       renderItem={(item) => (
         <List.Item>
           <Typography.Text mark>[ITEM]</Typography.Text> {item}
@@ -62,7 +63,7 @@ const App: React.FC = () => (
       footer={<div>Footer</div>}
       bordered
       dataSource={data}
-      renderItem={(item) => <List.Item>{item}</List.Item>}
+      renderItem={(item) => <List.Item key={item}>{item}</List.Item>}
     />
     <Divider orientation="left">Large Size</Divider>
     <List
@@ -71,14 +72,14 @@ const App: React.FC = () => (
       footer={<div>Footer</div>}
       bordered
       dataSource={data}
-      renderItem={(item) => <List.Item>{item}</List.Item>}
+      renderItem={(item) => <List.Item key={item}>{item}</List.Item>}
     />
     <Divider orientation="left">Meta</Divider>
     <List
       itemLayout="horizontal"
       dataSource={data1}
       renderItem={(item, index) => (
-        <List.Item>
+        <List.Item key={item.title}>
           <List.Item.Meta
             avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
             title={<a href="https://ant.design">{item.title}</a>}
@@ -92,7 +93,7 @@ const App: React.FC = () => (
       itemLayout="vertical"
       dataSource={data1}
       renderItem={(item, index) => (
-        <List.Item>
+        <List.Item key={item.title}>
           <List.Item.Meta
             avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
             title={<a href="https://ant.design">{item.title}</a>}

components/list/demo/grid-test.tsx

@@ -34,15 +34,21 @@ const App: React.FC = () => (
       grid={{ gutter: 16, column: 4 }}
       dataSource={data}
       renderItem={(item) => (
-        <List.Item>
+        <List.Item key={item.title}>
           <Card title={item.title}>Card content</Card>
         </List.Item>
       )}
     />
-    <List grid={{ gutter: 16, column: 4 }} dataSource={data} renderItem={() => <ListItem />} />
     <List
       grid={{ gutter: 16, column: 4 }}
       dataSource={data}
+      rowKey="title"
+      renderItem={() => <ListItem />}
+    />
+    <List
+      grid={{ gutter: 16, column: 4 }}
+      dataSource={data}
+      rowKey={(item) => item.title}
       renderItem={() => (
         <>
           <ListItem />

components/list/demo/grid.tsx

@@ -20,6 +20,7 @@ const App: React.FC = () => (
   <List
     grid={{ gutter: 16, column: 4 }}
     dataSource={data}
+    rowKey={(item) => item.title}
     renderItem={(item) => (
       <List.Item>
         <Card title={item.title}>Card content</Card>

components/list/demo/infinite-load.tsx

@@ -62,6 +62,7 @@ const App: React.FC = () => {
       >
         <List
           dataSource={data}
+          rowKey="email"
           renderItem={(item) => (
             <List.Item key={item.email}>
               <List.Item.Meta

components/list/demo/loadmore.tsx

@@ -40,7 +40,14 @@ const App: React.FC = () => {
   const onLoadMore = () => {
     setLoading(true);
     setList(
-      data.concat([...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} }))),
+      data.concat(
+        Array.from({ length: count }, (_, i) => ({
+          loading: true,
+          name: {},
+          picture: {},
+          email: `fake-${i}`,
+        })),
+      ),
     );
     fetch(fakeDataUrl)
       .then((res) => res.json())
@@ -77,6 +84,7 @@ const App: React.FC = () => {
       itemLayout="horizontal"
       loadMore={loadMore}
       dataSource={list}
+      rowKey="email"
       renderItem={(item) => (
         <List.Item
           actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}

components/list/demo/pagination.tsx

@@ -67,6 +67,7 @@ const App: React.FC = () => {
       <List
         pagination={{ position, align }}
         dataSource={data}
+        rowKey="title"
         renderItem={(item, index) => (
           <List.Item>
             <List.Item.Meta

components/list/demo/responsive.tsx

@@ -34,6 +34,7 @@ const App: React.FC = () => (
       xxl: 3,
     }}
     dataSource={data}
+    rowKey="title"
     renderItem={(item) => (
       <List.Item>
         <Card title={item.title}>Card content</Card>

components/list/demo/simple.tsx

@@ -18,7 +18,7 @@ const App: React.FC = () => (
       bordered
       dataSource={data}
       renderItem={(item) => (
-        <List.Item>
+        <List.Item key={item}>
           <Typography.Text mark>[ITEM]</Typography.Text> {item}
         </List.Item>
       )}
@@ -30,7 +30,7 @@ const App: React.FC = () => (
       footer={<div>Footer</div>}
       bordered
       dataSource={data}
-      renderItem={(item) => <List.Item>{item}</List.Item>}
+      renderItem={(item) => <List.Item key={item}>{item}</List.Item>}
     />
     <Divider orientation="left">Large Size</Divider>
     <List
@@ -39,7 +39,7 @@ const App: React.FC = () => (
       footer={<div>Footer</div>}
       bordered
       dataSource={data}
-      renderItem={(item) => <List.Item>{item}</List.Item>}
+      renderItem={(item) => <List.Item key={item}>{item}</List.Item>}
     />
   </>
 );

components/list/demo/vertical.tsx

@@ -35,6 +35,7 @@ const App: React.FC = () => (
         <b>ant design</b> footer part
       </div>
     }
+    rowKey="title"
     renderItem={(item) => (
       <List.Item
         key={item.title}