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

Question

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

Answer 1

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>