Looking at this specific component:
const SaleBadge = ({ textContent, badgeColor }) => {
return (
<Badge className={`bg-${badgeColor}-200 hover:bg-${badgeColor}-300 animate-pulse align-middle ml-2`} variant="secondary"><Percent className="w-4 mr-2" />{textContent}</Badge>
)
}
The issue arises when trying to set the background color of the Badge based on the template literal and the "badgeColor" prop. Strange results are being produced.
For example, changing the value from "-200" to "-300" causes no background color to appear, almost as if an invalid color is being passed. However, if a fixed color like "violet-300" is used initially, then switching back to using "badgeColor" works perfectly fine. Any thoughts on why this might be happening?
It's unclear whether this behavior is intended or not, as it seems that template literals are somewhat functioning in this context.
An attempt was made to address this issue by creating a function that generates the className string, but the problem continues:
const SaleBadge = ({ textContent, badgeColor }) => {
function returnBadgeClassName() {
return(
`bg-${badgeColor}-500 hover:bg-${badgeColor}-300 animate-pulse align-middle ml-2`
)
}
return (
<Badge className={returnBadgeClassName()} variant="secondary"><Percent className="w-4 mr-2" />{textContent}</Badge>
)
}