ISSUE
Getting 500 error due to object error in the console log. Mapping an array into Link and images.
URL
https://main--dashing-lolly-bce458.netlify.app/products-offer
CODE:
const todos= [
{ “name”:
“business-loans”
},
{ “name”:
“equipment-financing”
},
{ “name”:
“helix-healthcare-financing”
},
{ “name”:
“invoice-factoring”
},
{ “name”:
“line-of-credit”
},
{ “name”:
“purchase-order-financing”
},
{ “name”:
“revenue-based-financing”
},
{ “name”:
“sba-loan”
}
]
<motion.div className=“grid grid-cols-2 gap-4 parentdiv m-5”>
{
// [
// “business-loans”, “equipment-financing”, “helix-healthcare-financing”,
// “invoice-factoring”, “line-of-credit”, “purchase-order-financing”,
// “revenue-based-financing”, “sba-loan”
// ].map((product, index) => (
todos.map((product, index) => (
<Link
href={/product-we-offer/${product.name}}
key={index}
passHref={true}
>
<motion.div className={styles.parentdiv}>
<motion.div
whileTap={{ scale: .9}}
className=“relative”
>
<motion.img
layoutId={product.name}
className=“margin-auto w-80 h-40 rounded-lg object-cover”
src={images/products-offer-images/${product.name}.jpg}
animate={{
scale: 1,
transition: {
duration: 0.7,
delay: 0.3,
type: “spring”,
damping: 30,
mass: 0.95,
stiffness: 100
}
}}
whileHover={{ scale: .9 }}
/>
<motion.h3
className=“text-lg font-bold absolute -mt-24 text-white leading-tight p-5 z-10 capitalize”
style={{textShadow: “1px 1px #305670”}}
>
{product.name.replaceAll(‘-’,’ ')}
</motion.h3>
</motion.div>
</motion.div>
))}
</motion.div>