React: How could I add a fade out animation on delete on dynamically generated table entries?


For several days I have been trying to figure out how to add a fade out animation on dynamically generated table in React, but I had no luck in it yet.


Seems like every approach I try has some limitations to it and does not work in my case:

  1. I tried to set it up with refs, but it seems that I cannot dynamically add and correctly store those refs in my React component for a table that has multiple dynamically generated entries.
  2. ReactTransitionGroup has its limitations in sense that when I wrap my parent element in TransitionGroup my table design seems to shift away and move everything under the first column. As well as the fade out functionality has not worked for me.

What would be your recommend approach for such task? Is there any library that I could try for this sort of problem?

Best regards,

P.S. Here is the link on my source code.