React-Beautiful-Dnd doesn't rerender after inserting new Draggable

user_9309990 0
Viewed 1544

I'm having some problems using the React-Beautiful-Dnd library for creating a Drag and Drop system on my webapp. I followed the tutorial and it all went well, but I'm trying now to use it in my app where I need to be able to add and remove Draggable objects through user request with some add/delete button. The problem is that the app doesn't re-render anything until I try to move one of the old Draggables.

Other than that, for some reason, after the onDragEnd function is called, the app doesn't find the ID of the Draggable that was moved in that moment. I don't know what to do for this. I wrote an example code of the problem in CodeSandBox: https://codesandbox.io/s/zealous-blackwell-f3mmh. If someone could help me I'd be really grateful.

react-beautiful-dnd reactjs javascript
2 Answers
user_143893410

I had this problem several times too. Try to replace all lines (at least line 28) where you wrote

let newItems = items;

with

let newItems = [...items];

The problem is that it does not work well if you try to modify the state itself, but if you create a copy of the array it works perfectly well (at least to me)

user_169669730
Related