Issue regarding key for DisplayCampaings

[swarnim-dev]

So the issue that my console is giving me is "Each child in a list should have a unique key prop"

FundCard:

import React from 'react';

import { tagType, thirdweb } from '../assets';
import { daysLeft } from '../utils';

const FundCard = ({ owner, title, description, target, deadline, amountCollected, img, handleClick }) => {
    const remainingDays = daysLeft(deadline);

    return (
        <div className="sm:w-[288px] w-full rounded-[15px] bg-[#1c1c24] cursor-pointer" onClick={handleClick}>
            <img src={img} alt="fund" className="w-full h-[158px] object-cover rounded-[15px]" />
        </div>
    )
}

export default FundCard;

DisplayCampaigns:

import React from 'react';
import { useNavigate } from 'react-router-dom';

import FundCard from './FundCard';
import { loader } from '../assets';

const DisplayCampaigns = ({ title, isLoading, campaigns }) => {
    const navigate = useNavigate();

    const handleNavigate = (campaign) => {
        navigate(`/campaign-details/${campaign.title}`, { state: campaign })
    }

    return (
        <div>
            <h1 className="font-epilogue font-semibold text-[18px] text-white text-left">{title} ({campaigns.length})</h1>

            <div className="flex flex-wrap mt-[20px] gap-[26px]">
                {isLoading && (
                    <img src={loader} alt="loader" className="w-[100px] h-[100px] object-contain" />
                )}

                {!isLoading && campaigns.length === 0 && (
                    <p className="font-epilogue font-semibold text-[14px] leading-[30px] text-[#818183]">You haven't yet created a campaign.</p>
                )}

                {!isLoading && campaigns.length > 0 && campaigns.map((campaign) => <FundCard key={campaign.id} {...campaign} handleClick={() => handleNavigate(campaign)} />)}
            </div>
        </div>
    )
}

export default DisplayCampaigns;

[skiran017]

in DisplayCampaigns component

<FundCard key={campaign.id} ... />
change this to  <FundCard key={campaign.pId}

as we are assigning id as pId in context, seems like typo

[swarnim-dev]

in DisplayCampaigns component

<FundCard key={campaign.id} ... />
change this to  <FundCard key={campaign.pId}

as we are assigning id as pId in context, seems like typo

Thanks bro, i don't know how i missed such a silly mistake