export default function DetailSkill() {
const { item } = useParams();
return (
<div className="w-screen min-h-screen flex flex-col p-[30px] bg-slate-100 overflow-hidden">
<Header title={item} />
<div className="mt-12 flex flex-col gap-4">
<img src={dataDetailSkill[item].bannerImg} alt="" className="w-full h-[200px] object-cover rounded-lg" />
<p>{dataDetailSkill[item].description}</p>
<div className="flex flex-col gap-4">
{dataDetailSkill[item].data.map((v) => {
return <SkillCard title={item} content={v.title} img={v.img} link={v.github} key={v.id} />;
})}
</div>
</div>
<ModalMenu />
</div>
);
}
what’s wrong with the code. chrome says dataDetailSkill[item].data.map is not a function. I use Vite React. sorry newbie
dataDetailSkill.js
I want to do mapping on the dataDetailSkill.js file but there is an error
export default {
html: {
description: "Membuat website sederhana",
bannerImg: "https://images.pexels.com/photos/4439901/pexels-photo-4439901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
data: {
id: 1,
title: "Membuat website landing page",
github: "",
img: "https://images.pexels.com/photos/114907/pexels-photo-114907.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
},
},
frontend: {
description: "Membuat website dengan React JS",
bannerImg: "https://images.pexels.com/photos/4439901/pexels-photo-4439901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
data: {
id: 1,
title: "Membuat website film",
github: "",
img: "https://images.pexels.com/photos/114907/pexels-photo-114907.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
},
},
it: {
description: "Sertifikat Kepelatihan saya dalam IT",
bannerImg: "https://images.pexels.com/photos/4439901/pexels-photo-4439901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
data: {
id: 1,
title: "IT Support",
github: "",
img: "https://images.pexels.com/photos/196644/pexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
},
},
web: {
description: "Project membuat web design",
bannerImg: "https://images.pexels.com/photos/4439901/pexels-photo-4439901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
data: {
id: 1,
title: "Project saya",
github: "",
img: "https://images.pexels.com/photos/196644/pexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
},
},
};I’ve followed the tutorial on YouTube but the error still persists