I have a highscore list that updates automatically with current scores once every minute.
It then updates the component with this.setState({ data: newData });.
Below I sort the new data by score, run each item through map that updates their style.top.
Javascript
...
let current = this.state.data.sort((a,b) => {
if(a.score < b.score) return -1;
if(a.score > b.score) return 1;
return 0;
});
let items = current.map((item,i) => {
return (
<div
key={item.name}
className="item"
style={{ top: (i*30) + 'px', backgroundColor: item.color }}>
{item.name}
</div>
);
});
return (
<div>
{items}
</div>
);
CSS
.item {
position: absolute;
transition: top 1s;
}
I want the items to animate up and down to their new positions, but this doesn't happen. The browser seems to remember parts of the DOM, but not others.
React seems to understand which item is which by using the unique key, if I inspect using React Developer Tools, but the actual DOM doesn't.
Even stranger, only items moving up the list (higher score) seems to be remembered. Items moving down is recreated, and therefor the transition doesn't work. They just pop into existence without transitioning to their new position.