React-beautiful-dnd: Add warning: do not use index as a part of a draggableId or droppableId

[iliran11]

I have a list of droppables items, and i am manipulating the list. (removing items from the list).
occasionaly, I am getting the following error:

Uncaught Error: Invariant failed: Cannot update droppable registration as no previous registration was found

Usually coupled with:
Uncaught Error: Invariant failed: Cannot unregister Droppable with id SECTION2486 as as it is not registered

What the error should tell me? I have nothing to do with registrations and i'm not trying to update a droppable (what action should i take to update a droppable? does it mean re-render it?)

[alexreardon]

It looks like is a symptom of some other issue going on. Can you please post a reproducible example for us to explore?
Here is a boilerplate you can start from: https://codesandbox.io/s/k260nyxq9v

[iliran11]

Hi,
I couldn't re-produce it on a simple example scenario, so maybe there was other thing going on as you said.

I will close it for now,
thanks for your reply.

[MitchEff]

I'm struggling to reliably reproduce it too, but it's quite recently started popping up every now and again. It's generally after a deletion but occasionally after re-ordering, if my memory serves me correctly.

I'll see if I can work out any more details.

[BasileNouvellet]

I had the same issue, happening after deleting or re-ordering. After hours of debugging, it turned out that my Draggables IDs were not perfectly unique...
So during a deletion for example, React Beautiful DND was trying to delete a draggable which was not here anymore... raising an error.
Hope this helps.

[alexreardon]

Can you explain what you mean by 'not perfectly unique'?

Also, without an example that reproduces it we cannot action this 👍

[BasileNouvellet]

2 draggables happened to have the same ID, thus raising an error at deleting or re-ordering

[MilanRgm]

This one is occuring in mine as well(Invariant failed: Cannot unregister Draggable with id 2 as it is not registered
). Here is an example https://codesandbox.io/s/n9v7op9ymj . The items are thus not draggable i guess.

[AiBaby19]

did you got the solution?

[code-matt]

Also seeing this, happens when removing dnd sections ( there are dynamic amount on my particular page)

[jeremyadavis]

Just echoing that @BasileNouvellet comment about non-unique ids is what caused this for my situation.

I have three levels of Draggables and the database tables got their identity columns reset that were used as draggableIds so some conflicts started to arise making this a tough one to track down and reproduce.

Prefixing the draggleId with which level I'm at fixed my problem.

[mohdasim8018]

@alexreardon I am also experiencing the same error [1] and was able to reproduce the scenario where it's breaking.

Below is the sample code with which I am able to reproduce the issue:
https://codesandbox.io/s/l498kp2okm

_Background of sample:_ I have a list of questions and for each question list of answers nested. I should be able to re-order question and the answers within a question as well.

_Steps to reproduce_:
Move Question 2 draggable to question 1 and then to question 0. It would throw the error. Basically moving any element from bottom most section to the top would throw this error.

[1] "Invariant failed: Cannot update droppable registration as no previous registration was found"

[alexreardon]

Interesting. I will take a look on monday
On Sat, 8 Dec 2018 at 2:37 am, mohdasim8018 [e-mail]
wrote:

@alexreardon https://github.com/alexreardon I am also experiencing the
same error [1] and was able to reproduce the scenario where it's breaking.

Below is the sample code with which I am able to reproduce the issue:
https://codesandbox.io/s/l498kp2okm

Background of sample: I have a list of questions and for each question
list of answers nested. I should be able to re-order question and the
answers within a question as well.

Steps to reproduce:
Move Question 2 draggable to question 1 and then to question 0. It would
throw the error. Basically moving any element from bottom most section to
the top would throw this error.

[1] "Invariant failed: Cannot update droppable registration as no previous
registration was found"

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/708#issuecomment-445270287,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACFN7en56gKPrVQl1nVfLuC35Bj8vUhaks5u2otQgaJpZM4V8Nub
.

[alexreardon]

Thank you @mohdasim8018 for the reproducible example!!! I will get onto this. It should be fixed in the next patch release

[mohdasim8018]

@alexreardon Thank you for looking into it. When is the next patch release planned? The reason I ask is that I am currently evaluating drag and drop libraries and planning to soon start development of a feature for my company's web application. The release info would be helpful to plan our roadmap accordingly.

[alexreardon]

Hopefully this week

[alexreardon]

Your issue is that you are changing the droppableId between reorders based on the items index. Your issue will go away if you keep the droppableId constant between reorders.

The issue can be explained like this:

1. Update droppable

old: 'droppable-0'
new: 'droppable-1'

=> delete reference to droppable-0
=> add reference to droppable-1

1. Update droppable

old: 'droppable-1' // will be an issue
new: 'droppable-2'

=> delete reference to droppable-1 💥(will remove reference to our new droppable-1)
=> add reference to droppable-2

The second update will remove the new reference to droppable-1

We cannot really add a guard around this

[alexreardon]

We could probably add a warning to the docs that this is an dangerous usage of droppableId

[alexreardon]

We might be able to add a guard:

• some sort of unique internal identifier for a component outside of the draggableId / droppable

// in the module
const getUniqueId = (() => {
 let count: number = 0;

 return (): string => `droppable:${++count}`;
})();

// on the component 
componentDidMount() {
  this.uniqueId = getUniqueId();
}

Then all internal updates could be done using the unique identifier and not the droppableId/draggableId.

This would be a fair bit of effort. I suspect it would be easier to tell consumers to not use the index as a part of a draggableId / droppableId

[alexreardon]

Proposed doc section:

Avoid clashing id's

Don't base a draggableId or droppableId on it's index

For simplicity, it is best to avoid changing a draggableId or droppableId when a reorder occurs.

Safest option: associate an id with an piece of data and do not update the id between reorders

You can change the draggableId or droppableId at any time except during a drag. Including a reorder. However, to avoid an exception you need to avoid swapping id's between two components. This can happen if you base a draggableId or droppableId on an index.

What this looks like internally

1. Update droppable

old droppableId: "droppable-0"
new droppableId: "droppable-1"

👉 delete reference to "droppable-0"
👉 add reference to "droppable-1"

2. Update droppable

old droppableId: "droppable-1" 😢
new droppableId: "droppable-2"

👉 delete reference to "droppable-1" 😢(will remove reference to our new "droppable-1")
👉 add a reference to "droppable-2"

3. Update droppable

old droppableId: "droppable-1" 💥
new droppableId: "droppable-5"

👉 delete reference to "droppable-1" 💥(will cause an exception because "droppable-1" is not found)

[mohdasim8018]

@alexreardon Thanks for the explanation. The use-case I have is allowing a user to be able to build a re-orderable dynamic survey form i.e ability to dynamically add questions (reorderable) and answers (reorderable) within a question.

As per your recommendation, if I am understanding correctly indexes should not be used. Instead, each movable element should be associated with an id and that id should be the droppableId/ draggableId? The answers array in my example should be an array of objects to associate each answer with an id.

Also, droppable _type_ should not be based on _index_ as well? As I am currently using it to identify which question the answer list belongs to when re-ordering answers within a question [1].

[1] <Droppable droppableId={droppable${question.id}} type={${questionNum}}>
Modified code sandbox with added _id_ attribute instead of using _indexes_ - https://codesandbox.io/s/jl98nqwv33

[alexreardon]

You can change the type if you want after a reorder 👍

[mohdasim8018]

@alexreardon Sorry I am trying to wrap my head around it, bit confused on how using a question id is different from using the indexes of the questions array. I am ultimately providing the same value as index for the droppableId in the below line of code
<Droppable droppableId={droppable${question.id}} type={${questionNum}}>
example - https://codesandbox.io/s/jl98nqwv33

Could you please throw some light on it?

[MitchEff]

FWIW I'm not sure what the inner workings are, but I've observed it doing some wild stuff with the indices - I'd try avoid anything to do with them in this context.

For example if each draggable displays its index in text, as soon as a drag starts, they all appear to be multiplied.

[mohdasim8018]

@alexreardon To add to my previous comment just wanted to confirm before moving forward if my use-case falls within the scope of this library?

"The use-case I have is allowing a user to be able to build a re-orderable dynamic survey form i.e ability to dynamically add questions (reorderable) and answers (reorderable) within a question"

[alexreardon]

yes for sure @mohdasim8018

You just need to be careful with the ids :)

[mohdasim8018]

@alexreardon Thanks for confirming. If droppableId/ draggableIds are carefully chosen and partially based on the index like droppable${index} that uniquely identifies this droppable among other droppables and draggables within the DragDropContext. That should work fine right?

Since for my dynamic question and answers survey form, it would help in associating a list of answers to a question and to provide dynamic uniqueIds to each answer draggable within DragDropContext like below:
draggableId={${questionIndex}${answerIndex}}

Please advise and correct if my approach doesn't seem to be on right track. Also, please let me know if my explanation wasn't clear enough will try to explain in a bit more detail.

[mehmetcan92]

I had the same issue, but a little more complex this case. I'm creating dynamic droppable component. After that saved in state. I'm have delete state button. when it click,it delete state for dynmaic droppable. I'm getting error below.Btw All droppable and draggable ids is unique.red squares all in one droppable component and they have uniq Id
"variant failed: Cannot unregister Droppable with id 289ca936-ac46-4bfc-83d6-ff9fce86bd47 as as it is not registered
at invariant (tiny-invariant.esm.js:11)"

unrendered component data in state like that below.

why I get such an error when I try to delete the component ? Can you help me? Thanks a lot

[alexreardon]

Hi @mehmetcan92 can you please create a seperate issue?

[alexreardon]

@mohdasim8018 I would avoid using the index if you can. You might be able to use it for your droppables as long as they are not being reordered

[mehmetcan92]

Hi @alexreardon

I created new issue. Can you examine #1191