Currently, I am working on a Progress Bar Component and utilizing the following versions:
"next": "13.4.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"classnames": "^2.3.2",
I am facing an issue where I am unable to change the width (Tailwind Class) of the Progress Thumb based on the currentValue Props. I have encountered this problem previously, but now I am seeking assistance. Additionally, I am using classNames() to improve class conditionals.
Below is my code snippet:
import classNames from 'classnames'
import React from 'react'
type ProgressBarProps = {
maxValue?: number
currentValue: number
showNumbers?: boolean
orientation?: 'vertical' | 'horizontal'
}
export const ProgressBar = ({
currentValue,
maxValue = 100,
showNumbers = true,
orientation = 'vertical',
}: ProgressBarProps) => {
return (
<div
className={classNames('flex items-center w-full gap-2', {
'flex-row': orientation === 'horizontal',
'flex-col': orientation === 'vertical',
})}
>
// -> Progress Wrapper
<div className="flex items-center w-full h-2 gap-2 rounded-md bg-third-250">
// -> Progress Thumb
<div
className={classNames(`h-full bg-primary-500 `, {
'rounded-md': maxValue === currentValue,
'rounded-tl-md rounded-bl-md': maxValue !== currentValue,
[`w-[${currentValue}%]`]: currentValue,
})}
/>
</div>
// Irrelevant right now
{renderNumericProgress()}
</div>
)
}
When inspecting the HTML result in the Chrome Console, we can observe the w-[10%] that I'm passing as props to this component:
<div class="flex items-center w-full h-2 gap-2 rounded-md bg-third-250">
<div class="h-full bg-primary-500 rounded-tl-md rounded-
bl-md w-[10%]">
</div>
</div>
I have attempted the following approaches without success:
className={`w-[${currentValue}%]`}className={classNames(`w-[${currentValue}%]`)}className={twMerge(`w-[${currentValue}%]`)}