search

bokuweb / react-rnd

🖱 A resizable and draggable component for React.
https://bokuweb.github.io/react-rnd/stories
MIT License
3.94k stars 324 forks source link

positional value of array element changing after deleting #616

Open Camelot93 opened 4 years ago

Camelot93 commented 4 years ago

Hey I have an issue, when i delete an element in an array with Rnd as a parent all elements that are ahead of the deleted one move to the position of the element before them. how do I change that?

sanjitgroverincedo commented 4 years ago

Hi Camelot93, did you find a solution to this problem?

aktn commented 4 years ago

Having the same thing :(

bokuweb commented 4 years ago

@Camelot93 @aktn Could you please provide a reproduced example in codesandbox?

sanjitgroverincedo commented 4 years ago

Hi @Camelot93, my issue was I was displaying Rnd in row and col. When I added new Rnd on button click, it tends to get in another col causing the error. So I did, Container> {this.state.rnds.map(rnd->Rnd> <Rnd)} /Container> It resolved my issue. Hope this helps.

bokuweb commented 4 years ago

@sanjitgroverincedo Thanks

Aldemylla commented 2 years ago

For anyone still having the same problem, I solved this by changing the index component's key to an identifier

Before: rnds.map((rnd, index) => <Rnd key={index} />) After: rnds.map(rnd => <Rnd key={rnd.id} />)

When deleting an element from the list, the index of its successor would change to the one that was deleted, causing the problem.