react dnd-kit sortable : why is the first element of my sortable not draggable?

Question

I am trying to build a very basic sortable using react dnd-kit, and everything works, except one thing : the first element of my sortable array doesn't move when it is dragged (it moves when other elements are dragged on it, which makes this even weirder).

Here is the CodeSandBox with the project : https://codesandbox.io/s/condescending-wright-scyqvo?file=/src/components/Item.js

Hope someone can help me, thanks a lot :)

Dementia

Answer 1

Ok I solved it, but I'll leave it here just in case it can be useful to someone else.

The id given to the useSortable hook cannot be 0, and therefore the ids of the list should begin at 1.

Dementia

You are a man of culture and honour. – Rambouillet

Didn't find anything about this, can you share some docs link? – Tannatannage

It's because 0 is falsy I think ! – Dementia

I ran into the same issue. Thank you so much. – Libnah

Answer 2

It's already solved but I don't see the solution I came up with. So when passing the ID to useSortable hook you can surround it with backticks like so:

const { attributes, listeners, setNodeRef, transform } = useDraggable({
  id: `${your_id}`,
});

Earldom

Yea nice one, '0' is not falsy while 0 is :) – Dementia