React Parent state update wiping child state
My InventoryCard (parent) component has an 'isHovered' state being set by an onMouseEnter/Leave event listener.
Its child, ImgSlider receives isHovered as a prop. So when isHovered changes, both InventoryCard & ImgSlider will be re-rendered, reflecting its new value.
ImgSlider has its own state, 'visualIndex', which is updated by interacting with it (clicking arrows) which happens while the parent is still being hovered & isHovered is still true.
After I've reset the child's visualIndex state, I then un-hover the parent InventoryCard, causing isHovered to go back to false and a re-render of the parent (and child) occurs again.
This time, when the child ImgSlider is re-rendered, its visualIndex state gets set back to '0' instead of still reflecting the change.
So the child is keeping its state so long as the parent's state (isHovered) doesn't change, but once isHovered get reset to false again, the child's visualIndex state is wiped and re-'mounted'(?) from scratch, whereas I want it to be retained.
GH: https://github.com/nndesigns/old_cars_ltd.git
--- working on deployment
Its child, ImgSlider receives isHovered as a prop. So when isHovered changes, both InventoryCard & ImgSlider will be re-rendered, reflecting its new value.
ImgSlider has its own state, 'visualIndex', which is updated by interacting with it (clicking arrows) which happens while the parent is still being hovered & isHovered is still true.
After I've reset the child's visualIndex state, I then un-hover the parent InventoryCard, causing isHovered to go back to false and a re-render of the parent (and child) occurs again.
This time, when the child ImgSlider is re-rendered, its visualIndex state gets set back to '0' instead of still reflecting the change.
So the child is keeping its state so long as the parent's state (isHovered) doesn't change, but once isHovered get reset to false again, the child's visualIndex state is wiped and re-'mounted'(?) from scratch, whereas I want it to be retained.
GH: https://github.com/nndesigns/old_cars_ltd.git
--- working on deployment
GitHub
Sample car site Old Cars Ltd. Contribute to nndesigns/old_cars_ltd development by creating an account on GitHub.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
