Using react spring to reorder the elements of a leaderboard

[RobertJSmith]

I'm having some issues implementing this functionality with react-spring. On render, I iterate through an array and render a row for each person. On user interaction, I'll reorder one person in the array to where the should be in the leaderboard this week. I do this one by one on click until everyone has been processed. Can anyone help?

[tomdohnal]

Do you have a CodeSandbox of your current implementation?

[RobertJSmith]

Not an exact one (I can't remember the sort code I used) but I've whipped up something similar here. https://codesandbox.io/s/suspicious-firefly-89yp2?file=/src/App.js:0-1246. I guess I'm having trouble understanding whether I should change the springs themselves using set, update the data state or if I'm using the right kind of transform (i.e. should I be using transform: to()>)

[tomdohnal]

I've changed your CodeSandbox a bit: https://codesandbox.io/s/upbeat-elion-xz2x9?file=/src/App.js

The main idea is that you always render the initial items and only change their positions using transform: translate3d(...).

[RobertJSmith]

That's great, thank you so much. I came up with a much more convoluted approach.

[tomdohnal]

Glad it worked for you!

[RobertJSmith]

I have a follow up question if you're willing. I have a second element that I want to enter from off screen, it then moves to the current row. I want to repeat the entrance animation each time the next person button is clicked without the Y translation. What's the best way to do that? https://codesandbox.io/s/elegant-voice-j5x35?file=/src/App.js