Using object array instead of a string array for id?

My sortable item has several props exposed such as title, category and image.

So instead of

[items, setItems] = useState(['1', '2', '3']);

My sortable item looks like:

[items, setItems] = useState([
{id: '1', title: 'x', category: 'y'},
{id: '2', title: 'z', category: 'w'}
...])

I am not sure how I can make this work.

Any help would be appreciated!

[vbylen]

Awesome.

Using ‘sortedItemIds’, how would you reconfigure the handleDragEnd function?

function handleDragEnd(event) {
    const {active, over} = event;
    
    if (active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.indexOf(active.id);
        const newIndex = items.indexOf(over.id);
        
        return arrayMove(items, oldIndex, newIndex);
      });
    }
  }

Replacing ‘items’ by ‘items.id’ does not seem to work.

fixed it with following code:

const oldIndex = items.map((item) => item.id).indexOf(active.id);
            const newIndex = items.map((item) => item.id).indexOf(over.id);

[clauderic]

As mentioned by @TheUrbina20, the solution is to map the items to their corresponding unique identifiers.

You may want to memoize to avoid needless re-renders of the SortableContext:

const [items, setItems] = useState([
  {id: '1', title: 'x', category: 'y'},
  {id: '2', title: 'z', category: 'w'},
  ...
])
const sortedItemIds = useMemo(() => items.map((item) => item.id), [items]);

<SortableContext
  items={sortedItemIds}
>
  {...}
</SortableContext>