React (Dynamic) Error: your container has duplicate slot ids

[chelscodes]

I followed the documentation for using React (Dynamic) and got it working. (Thank you for the updates!)

Here's my use case: I'm building a form to create a module. A module contains multiple lessons. On the page with swapy, user sees a list of lessons and can add lessons to the module (via an "add" button). Once added to the module, the lessons can be re-ordered with swapy.

It's working as expected until a user adds lessons, reorders them, deletes a lesson, then re-adds the same lesson. In this case, the slot id and item id don't match, and when the user tries to add the lesson back, the slot id is a duplicate id. (My understanding of what's happening)

Put another way, once an item is reordered and removed, it causes an error when re-adding it to the list.

Is there a way I can fix this while sill using the provided utils functions?

[austinbricco]

Looks like we came across this issue around the same time yesterday: #129

I was able to resolve this by overriding the util.dynamicSwapy function here and updating it to:

slot: `${item[idField] as string}-${Math.random().toString().slice(2)}`,

There are other/better ways to ensure a unique ID, but this worked fine for my use case.