2

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.

Fsanna
  • 347
  • 1
  • 4
  • 11

2 Answers2

1

Seems like the app doesn't rerender when the state changes.

One solution is to trick react. See my solution https://codesandbox.io/s/keen-rubin-kxj6o?file=/src/App.js

Using forceUpdate

KnowYourElements
  • 392
  • 1
  • 12
  • Perfect, that works! Do you have any suggestions about the other problem I mentioned? If you try to move one of the text fields, you'll notice that it doesn't let you move it anymore after the first time – Fsanna Dec 20 '20 at 16:46
  • Check you logic in the area where you splice the array to move the items. – KnowYourElements Dec 20 '20 at 17:05
1

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)

Sergio Camara
  • 11
  • 1