CODEWITHSUNDEEP
reactjsdrag-and-dropreact-dndreact-beautiful-dnd
Juanma Menendez
Juanma Menendez

Reputation: 20089

React beautiful DND: Detected non-consecutive <Draggable /> indexes - Error when re-reodering

Using https://www.npmjs.com/package/react-beautiful-dnd after reordering some element for the first time, reordering of the previously moved item is not possible and the console prints

 Unable to find draggable with id: XXX

Also, when dragging another item the UI get broken and the console prints:

Detected non-consecutive <Draggable /> indexes.(This can cause unexpected bugs) 0, [🔥2], 3, 4, 5

Upvotes: 5

Views: 5009

Answers (2)

Dan B.
Dan B.

Reputation: 1583

I got this same error due to a bug in my state logic, where two draggables (in different droppables) had the same draggableId.

Upvotes: 0

Juanma Menendez
Juanma Menendez

Reputation: 20089

SOLUTION

You have to add the key property to the <Draggable key={uniqueId} ...> component.

also, please notice:

  • You cannot use the array index as value for the key attribute
  • key value should be a unique id and stable value (not change across re-render) that represents the element

BROKEN

    <Draggable draggableId={id} index={index}>
                {(provided) => (
                   ...
                )}
    </Draggable>

FIXED

<Draggable key={uniqueId} draggableId={uniqueId} index={index}>
            {(provided) => (
                     ...
            )}
 </Draggable>

Upvotes: 16

Related Questions