Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug when deleting element of the array in React 18 #181

Open
Alexey-Timakov opened this issue Nov 13, 2023 · 2 comments
Open

Bug when deleting element of the array in React 18 #181

Alexey-Timakov opened this issue Nov 13, 2023 · 2 comments

Comments

@Alexey-Timakov
Copy link

Alexey-Timakov commented Nov 13, 2023

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.

@dima716
Copy link

dima716 commented Sep 4, 2024

@Alexey-Timakov hi! Have you managed to solve this issue? I have the similar issue and don't know what the cause of the problem

@Alexey-Timakov
Copy link
Author

@Alexey-Timakov hi! Have you managed to solve this issue? I have the similar issue and don't know what the cause of the problem

Unfortunately no, i didn't. Just decided to not use it at all

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants