Changing the width of an element based on the value of a react variable

[cordobadigitalmedia]

Hi

I'm trying to create a progress bar for audio playback. I have the following code that shows the inside progress color when the width is set statically

<div class="bg-gray-200 dark:bg-black rounded-full overflow-hidden">
      <div class="bg-lime-500 dark:bg-lime-400 w-1/2 h-1.5" ref={progressBar} role="progressbar"></div>
</div>
<div className="text-gray-500 dark:text-gray-400 flex justify-between text-sm font-medium tabular-nums">
<div>{calculateTime(currentTime)}</div>
<div>{calculateTime(duration - currentTime)}</div>
</div>

With dynamic progress width

<div class="bg-gray-200 dark:bg-black rounded-full overflow-hidden">
      <div class={`bg-lime-500 dark:bg-lime-400 w-${currentTime*2} h-1.5`} ref={progressBar} role="progressbar"></div>
</div>
<div className="text-gray-500 dark:text-gray-400 flex justify-between text-sm font-medium tabular-nums">
<div>{calculateTime(currentTime)}</div>
<div>{calculateTime(duration - currentTime)}</div>
</div>

I tried to set the width to be based on a state variable that changes based on setInterval() but it does not update. The currentTime update displays fine. Is there anything else I need to do to trigger the style change dynamically?

[alexanderbluhm]

@cordobadigitalmedia This is probably not working because of your purge settings. So because you don't explicitly have w-2 w-4 ... in your file, these classes are not generated (if mode = JIT) or being removed (if mode != JIT).
See here for more details.

However, here it is a lot easier if you use inline style:

<div className="bg-lime-500 ..." style={{width: `${currentTime}px`}}

[cordobadigitalmedia]

@alexanderbluhm Excellent! It worked perfectly. Thanks so much