Portfolio react js mapping error for project cards - reactjs

Question

import React from 'react'
import net from '../assets/netflix.png'
const Porfolio = () => {
const Projects = [
{
id:1,
title:"Netflix Clone",
desc:"Netflix Landing Page Clone using React JS and Tailwind CSS with Authentication Feature using Firebase",
imgLink:net,
codeLink:"https://github.com/codegoggins/netflix-clone",
projectLink:"https://netflix-clone-13127.firebaseapp.com/"
}
]
return (
<div
className='px-20 py-4'>
<p
className='text-white text-4xl'
>Projects</p>
{/* PROJECT CARDS */}
<div
className='mt-8 flex flex-col justify-center items-center md:flex md:items-start'
>
{
Projects.map(({id,title,desc,imgLink,codeLink,projectLink})=>(
<>
{/* SINGLE CARD */}
<div className='w-[340px] h-auto relative group md:w-[500px]'>
{/* OVERLAY */}
<div
className='bg-black/80 text-sm md:text-lg absolute flex top-0 bottom-0 h-full w-full rounded-lg overflow-hidden opacity-0 group-hover:opacity-100 transition-all duration-300'>
{/* PROJECT DETAILS */}
<div
className='text-white text-sm md:text-lg flex flex-col p-4 gap-3 md:gap-2 items-center justify-center'>
{/* TITLE */}
<p>{title}</p>
{/* DETAIL */}
<p>{desc}</p>
{/* BUTTONS */}
<div
className='flex gap-3 text-sm md:text-lg'>
<button
className='cursor-pointer font-semibold p-1.5 px-4 rounded-md bg-white text-black transition ease-linear duration-300'
>
Code
</button>
<button
className='cursor-pointer font-semibold p-1.5 px-2 rounded-md bg-white text-black transition ease-linear duration-300'>
See Project
</button>
</div>
</div>
</div>
{/* Image */}
<div className='rounded-lg overflow-hidden'>
<img src={imgLink} alt="" className='h-full w-full object-cover'/>
</div>
</div>
</>
))
}
</div>
</div>
)
}
export default Porfolio
I am getting error to add key , for that instead of react fragments, I
replace it with a div and give key to it but I am getting error. With
react fragments I don't get any error but I can't add key to it for
mapping.
I want the card details to be mapped on all the cards.
enter image description here

Answer 1

You should return inside mapping and provide a key for the root element.
for example,
{
products?.map(({ id, title, desc, imgLink, codeLink, projectLink }) => {
return (
<div key={id} className='w-[340px] h-auto relative group md:w-[500px]'>
//Your code here
</div>
)
})}

Answer 2

You can add:
<React.Fragment key={id}>
some code
</React.Fragment>
or remove the fragment and add the key to the first div inside the map