Specifying key for items in GridList (react-aria-components)

[bstro]

When using the <GridList> component from react-aria-components, I am noticing that the keys: Selection argument passed to onSelectionChange consists of internal react-aria keys that don't have any relation to the data itself. I'd like my object keys to refer to the id property on the data collection I'm displaying. As is, onSelectionChange receives keys that look like react-aria-1, react-aria-2, and so on.

This is particularly important in my case because I am rendering the GridList's <Item>s using react-virtual and the ids that react-aria generates dynamically are not stable as rows are added/removed from the dom while scrolling, so while react-aria-1 might refer to the first item in the list now, that same item in the list may have a key like react-aria-62 later on when the user happens to scroll back to the top of the list.

Here's the basic structure of my code:

// MyGridList.tsx

// note: I tried to create an example at StackBlitz but there seems
// to be some issue with how react-aria-components is currently 
// bundled, as StackBlitz doesn't seem to be able to import anything
// from the package.
// https://stackblitz.com/edit/react-ts-otvdx2?file=App.tsx */

interface VirtualItem {
  key: string | number
  index: number
  start: number
  end: number
  size: number
}

const data = [...Array(1000)].map(() => ({ id: nanoid() }));

const rowVirtualizer = useVirtualizer({
    count: data.length,
    getScrollElement: () => parentRef.current,
    getItemKey: (index) => data[index].id,
    estimateSize: () => 64,
    overscan: 10,
  });

return <GridList
  disallowEmptySelection
  selectionMode="single"
  onSelectionChange={(selection) => {
    // I would expect some way to have 'selection' reflect the id property in the members of my collection 
    // like "Efpr733JGMyGU46Rgb_Xu", but instead 'selection' is something like 'react-aria-1'
    const arr = [...selection];
    setSelectedKey(arr[0]);
  }}
  items={rowVirtualizer.getVirtualItems()}
  {...props}
>
  {(item: VirtualItem) => (
    <Item key={item.key}>
      {item.index}-{item.key}
    </Item>
  )}
</GridList>

[snowystinger]

Issue with importing react-aria-components is that the first version is 1.0.0-alpha.3
anything before 1 was actually an old library. It'll be easier to share on stackblitz once we get out of pre-releases. But for now, you have to manually set it in the package.json

I'm surprised that the id is changing, we should be using whatever you specify if you have an id or key in your data set https://react-spectrum.adobe.com/react-stately/collections.html#unique-keys
And here's an example using useGridList that demonstrates we use it https://codesandbox.io/s/lucid-fire-mf0m6j?file=/src/App.js

[devongovett]

This is a bug, this if statement shouldn't be there:

react-spectrum/packages/react-aria-components/src/Collection.tsx

Line 611 in 1a38c6f

if (rendered.key == null) {

In the meantime, it should be safe to remove the key from the <Item> element in this example because we already set the key on the item based on the key from the data.

[bstro]

How about that! I took the key out and my code is running again.
Thanks @snowystinger && @devongovett

[iCrawl]

Stumbled upon this today 👍

Answer works fine, but I hope this won't get overlooked further down the line.