Bug when deleting element of the array in React 18
Alexey-Timakov opened this issue · comments
It works perfectly well with some sipmle element like P or Li. But when I tried to implement it to more complex components with style and structure like these:
.squares {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem;
}
.square {
padding: 1rem;
border: 0.2rem solid $border-grey;
border-radius: 0.3rem;
position: relative;
display: grid;
grid-template-rows: repeat(7, 1fr);
row-gap: 1rem;
z-index : //calculated from JSX props
}
<div classname={squares}>
{squares.map(square => {
return (
<div classname={square} />
)
}}
</div>
It works ok when I try to add new element to array - animation works properly, but only for the last element. If I add a new element to the start of the array it animate only the last element on rerender.
And I got simmilar bug when try to delete any element from array - it looks that only the last element moves and has animation on rerender.