I'm trying to play an animation on dismounting of my component with exit attribute, but it doesn't work despite the presence of !
The input animation works fine but not the output one !
I guess I'm mismanaging the dismounting of my description which is displayed if the props data.show is true, boolean that I change at the click on the project, in short if someone can point me...
Thanks in advance
There are quite a few issues to cover in your code and suggest you first understand what triggers re-rendering in React.
By creating a new uuid key every time you change prop data, you are breaking the ability for React to know which components need to be rendered again so it re-renders them all - so it's always a new instance on AnimatePresence and no way for AnimatePresence to know there has been a change to the key or a change in mounting. Also make use of useCallback hooks when passing in functions to child components to avoid re-renders.
Move the state up to the parent, update the card key to a consistent value between renders, and don't update the entire props data just to expand/collapse.
See the updated sandbox
I suggest that you don’t animate multiple items inline within the same space like this as you will always have the remaining boxes jump a little, but that is another topic.