react: Component does not re-render state variables on update unless placed in span
Do you want to request a feature or report a bug? bug
What is the current behavior?
- There is an interval timer that updates seconds/minutes/currentCount.
- Case 1 only updates seconds and currentCount.
- Case 1 does not update minutes correctly.
- Case 2 does not update minutes and seconds value on the UI, currentCount is being updated (Browser/Chrome)
- React seems to only update the component if the output state value is wrapped in a
<span>tag.
Case 1
<div><span>{this.state.minutes}/<span>{this.state.seconds}</span></span>x<span>{this.state.currentCount}</span></div>
Case 2
<div><span>{this.state.minutes}/{this.state.seconds}</span>x<span>{this.state.currentCount}</span></div>
What is the expected behavior?
State updates should cause a re-render for the component.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Chrome/ React: ^15.5.4
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 1
- Comments: 15 (2 by maintainers)
I also couldn’t reproduce. It’s likely an extension indeed. Maybe one of them is messing with the page (e.g. I remember Skype extension breaking anything that looked like phone number). Try disabling them.
I couldn’t reproduce this on chrome/macos. could you try in an incognito window (without extensions)? this gif is the expected behaviour, yes?