I am new to NEXT JS, and facing this wierd issue for which there seems to be no solution on internet. I am getting this Warning: Each child in a list should have a unique "key" prop like so:
Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using <tbody>. See https://reactjs.org/link/warning-keys for more information.
at BodyRow (/home/anchal/development-backoffice/node_modules/rc-table/lib/Body/BodyRow.js:37:25)
at Body (/home/anchal/development-backoffice/node_modules/rc-table/lib/Body/index.js:41:19)
at Body (/home/anchal/development-backoffice/node_modules/rc-table/lib/Body/index.js:41:19)
at table
at div
at div
at /home/anchal/development-backoffice/node_modules/rc-table/lib/Table.js:126:23
at /home/anchal/development-backoffice/node_modules/rc-table/lib/Table.js:126:23
at div
at DomWrapper (/home/anchal/development-backoffice/node_modules/rc-resize-observer/lib/SingleObserver/DomWrapper.js:31:34)
at SingleObserver (/home/anchal/development-backoffice/node_modules/rc-resize-observer/lib/SingleObserver/index.js:27:24)
at ResizeObserver (/home/anchal/development-backoffice/node_modules/rc-resize-observer/lib/index.js:27:24)
at Table (/home/anchal/development-backoffice/node_modules/rc-table/lib/Table.js:141:25)
at div
at div
at Spin (/home/anchal/development-backoffice/node_modules/antd/lib/spin/index.js:100:37)
at SpinFC (/home/anchal/development-backoffice/node_modules/antd/lib/spin/index.js:226:34)
at div
at InternalTable (/home/anchal/development-backoffice/node_modules/antd/lib/table/Table.js:73:34)
at div
at Assets (webpack-internal:///./src/collections/Assets/Assets.jsx:22:19)
at div
at AssetsPage (webpack-internal:///./src/pages/dashboard/assets.jsx:28:23)
at SessionProvider (/home/anchal/development-backoffice/node_modules/next-auth/react/index.js:416:24)
at MyApp (webpack-internal:///./src/pages/_app.js:17:18)
at StyleRegistry (/home/anchal/development-backoffice/node_modules/styled-jsx/dist/stylesheet-registry.js:231:34)
at AppContainer (/home/anchal/development-backoffice/node_modules/next/dist/server/render.js:390:29)
at AppContainerWithIsomorphicFiberStructure (/home/anchal/development-backoffice/node_modules/next/dist/server/render.js:420:57)
at div
at Body (/home/anchal/development-backoffice/node_modules/next/dist/server/render.js:688:21)
I have been using .map with key attribute at several places, but to check the cause of the issue, I have had commented the instances where .map was used, but the issue still exists and I have no clue from where is it coming.
Below is my src/collections/Assets/Assets.jsx:
import { AddAssets } from ".";
import { Table, Space, Button } from "antd";
import { useState } from "react";
import { DeleteData } from "..";
import { OwnerModal } from "..";
export const Assets = ({ assets, setAssets, collection, users }) => {
const [asset, setAsset] = useState();
const [editMode, setEditMode] = useState(false);
const [showModal, setShowModal] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);
const columns = [
{
title: "User Id",
key: "userId",
render: (_, record) => <OwnerModal data={record}></OwnerModal>,
},
{
title: "Title",
dataIndex: "title",
key: "title",
// sorter: (a, b) => a.firstName.localeCompare(b.firstName),
},
{
title: "Description",
dataIndex: "description",
key: "description",
},
{
title: "Land Registery",
dataIndex: "landRegistry",
key: "landRegistry",
render: (_, record) => (
<a
href={record?.landRegistry}
target="_blank"
rel="noopener noreferrer"
>
LandRegistry Image
</a>
),
},
{
title: "Floor Area",
dataIndex: "floorArea",
key: "floorArea",
},
{
title: "Has Outdoor Space",
key: "hasOutdoorSpace",
render: (_, record) => String(record.hasOutdoorSpace),
},
{
title: "Bedrooms",
dataIndex: "bedrooms",
key: "bedrooms",
},
{
title: "Bathrooms",
dataIndex: "bathrooms",
key: "bathrooms",
},
{
title: "Other Rooms",
dataIndex: "otherRooms",
key: "otherRooms",
},
{
title: "Sale Time Frame",
dataIndex: "saleTimeframe",
key: "saleTimeframe",
},
{
title: "Extra Conditions Labels",
dataIndex: "extraConditionsLabels",
key: "extraConditionsLabels",
},
{
title: "Extra Conditions Descriptions",
dataIndex: "extraConditionsDescriptions",
key: "extraConditionsDescriptions",
},
{
title: "AVM",
// dataIndex: "AVM",
key: "AVM",
render: (_, record) => (
<a href={record?.AVM} target="_blank" rel="noopener noreferrer">
AVM
</a>
),
},
{
title: "Survey Proof",
dataIndex: "surveyProof",
key: "surveyProof",
render: (_, record) => (
<a href={record?.surveyProof} target="_blank" rel="noopener noreferrer">
Survey Proof
</a>
),
},
{
title: "Images",
dataIndex: "images",
key: "images",
render: (_, record) =>
record.images.map((imageUrls, index) => (
<div key={index}>
<a href={imageUrls} target="_blank" rel="noopener noreferrer">
Image {index + 1}{" "}
</a>
</div>
)),
},
{
title: "Action",
key: "action",
render: (_, record) => (
<Space size="middle">
<Button
onClick={() => {
setAsset(record);
setEditMode(true);
setShowModal(true);
}}
>
Edit
</Button>
<DeleteData
users={assets}
setUsers={setAssets}
collection={collection}
data={record}
/>
</Space>
),
},
];
const dataSource = assets;
return (
<>
<AddAssets
users={users}
assets={assets}
editMode={editMode}
setEditMode={setEditMode}
asset={asset}
setAsset={setAsset}
showModal={showModal}
setShowModal={setShowModal}
setAssets={setAssets}
collection={collection}
/>
<div className="mt-8">
<Table
scroll={{ x: true }}
dataSource={dataSource}
columns={columns}
pagination={{
position: ["bottomCenter"],
pageSize: 20,
showSizeChanger: true,
hideOnSinglePage: true,
}}
/>
</div>
</>
);
};
And here comes src/pages/dashboard/assets.jsx:
import { prisma } from "~/prisma";
import Head from "next/head";
import { Navbar, Heading } from "~/components";
import { Users } from "~/collections";
import { useState } from "react";
import { Assets } from "src/collections/Assets";
import axios from "axios";
const AssetsPage = ({ collectionName, data, users }) => {
const [assets, setAssets] = useState(data);
return (
<>
<Head>
<title>Backoffice - Assets</title>
</Head>
<Navbar currentPage="asset" />
<div className="container mx-auto p-8 text-center">
<Heading level={3}>Assets</Heading>
<Assets
users={users}
assets={assets}
// setAssets={setAssets}
collection={collectionName}
/>
</div>
</>
);
};
export default AssetsPage;
export const getServerSideProps = async () => {
const { data } = await axios.get(
process.env.NEXTAUTH_URL + `/api/asset/get/getAsset`
);
const users = await prisma.user.findMany({
select: {
id: true,
email: true,
},
});
return {
props: {
data,
users,
collectionName: "asset",
},
};
};
rowKey="id needs to be added in antd table to resolve this error.
<Table
dataSource={dataSource}
columns={columns}
rowKey="id"
/>