progress bar percentage not recalculating on maxValue change

[likon416]

if we will dynamically change maxValue, for example using this value as a state, the progress bar percentage is not recalculated or recalculated wrongly.

[briansayles]

Experienced the same thing. It works correctly in version 4.3.0.

[natealmeida185]

I am having the same issue!! Even on 4.3.0

[amkgg]

Fixed: Set the maxValue to 1 and calculate the current value as percentage. It works perfectly and means you don't need to change the maxValue at all!

[CraigRonald555]

I passed the maxValue as a dependency so that the animatedCircleProps are reconfigured whenever the maxValue changes i.e. when using a state value. This has fixed the issue on my local version.

[CraigRonald555]

Fixed: Set the maxValue to 1 and calculate the current value as percentage. It works perfectly and means you don't need to change the maxValue at all!

This may work for some scenarios but what about wanting to show the actual value? I’m guessing you could only display it, at best, as a percentage?

[Qurat-ul-ainn]

animatedCircleProps

not working

[CraigRonald555]

animatedCircleProps

not working

Can you provide more details on what's going wrong? And your code implementation?

[FredMaia]

I added the key property and it worked. Here's a example:

value={isRestOn ? restMin * 60 - (minutes * 60 + seconds) : focusMin * 60 - (minutes * 60 + seconds)}
maxValue={isRestOn ? restMin * 60 : focusMin * 60}
key={isRestOn ? restMin * 60 : focusMin * 60}

with the key property, if restMin or focusMin change, the component will update