Transition with non-transitioning parent element

[AndriesVDW]

Hi guys,

Let's say I have a chessboard that is 2x2, so I've got an array that looks like this:

const pieces = [null, null, null, null];

The way I would then display the board is like this:

<div className="grid">
{ transitions((style, piece) => (
    <div className="tile">
        { piece && <animated.div style={style}>{piece}</animated.div> }
    </div>
)) }
</div>

This works fine when only adding pieces.
But when a piece is removed, the current transitioning item gets duplicated and now my chessboard has 5 tiles instead of 4.

Is there any way to prevent react-spring from duplicating that item? Or is there another solution to this problem?

Also made a small example showing what I mean:
https://codepen.io/AndriesVDW/pen/OJErMjv

Tried to achieve what I want another way and this also does not seem to work...
Click the square to add a card, click the card again te remove it:
https://codepen.io/AndriesVDW/pen/ExRGNMQ

Note that both examples do work when removing the leave animation.

[tristanmcpherson]

Try setting the keys property on the transition config, one example is keys: (item) => item.id