I used react-spring to animate a list which I display through map function but I noticed that even though I have a unique ID for each row, it keeps giving error that React has issue with two children with the same key.

key was: {key: item => item.order.id}

My question was that how can I fix this issue? I tried to find the answer online but I couldn't find anything useful, so I post it now as I found the solution.

CodePudding user response：

I found out that react spring loading the same row 2 times(one is exiting and the same row loading in another row), so I used to get error. In my case, the new row had a different status, So I just mixed the ID and status to build the key and the problem got solved.

{key: item => item.order.id item.order.status}

the old row still exist in the queue but the opacity and height changed to 0, and nobody can see that. That was the reason for getting the error