issues animating after element was removed

[ricardoglez]

I have an issue trying animate the items after removing an element. I update my array of elements after applying a slice to remove an element.

My code looks something similar to this :

let conditionalDash;
let conditionalComponent;
let temporalArray = activeEntries.map((entry , i) => {
    conditionalDash= (
      <MyDash key={i} index {i}/>
     )
     return  conditionalDash;
  )
});
conditionalComponent = (
<div id='dashContainer'>
     <Masonry
          disableImagesLoaded={false}
          onLayoutComplete={laidOutItems =>  this.handleLayoutComplete(laidOutItems)}
          onRemoveComplete={removedItems => his.handleRemoveComplete(removedItems)}
        >
          {temporalArray.length > 0 ? temporalArray: null}
    </Masonry>
</div>
)

Is something that i'm missing?

I want that when i remove the element with index 2 in a temporalArray (let's say that it has the length of 4), i want that the element with index 3, moves into the position of the second element.

The behavior that i'm getting is that when the element 2 is removed the element 3 overlap in when it used to live the element 2, the element that is removed from my elements Array is the last element of the array.

Here is a little diagram that explains the behaviour:

So i want to make an animation that the element [3] moves into the empty space that has been left after removing element [2].

[afram]

Hi @ricardoglez so firstly sorry for the very late reply - I didn't see this issue!

React has issues with keys that are array indexes. Have you tried using something else (like say UUIDs) as keys instead?

https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

[afram]

BTW, I'm not quite sure I understand the problem? element 3 should move into the space of element 2 - is element 2 not being deleted?

Also what transitionTime settings did you use?

[ricardoglez]

Thanks @afram, i found that my issue was the one that you indicate in the previous comment, i wasn't using a proper pattern for the keys attribute. Thanks :+1: