I’m trying to use this.

https://react-spectrum.adobe.com/react-aria/GridList.html

The examples only render lists of objects with custom rendering of each object in the GridListItem.

I would like to use React-Aria’s drag-and-drop framework to render a list of reorderable widgets, where the contents of each widget is rendered elsewhere and passed to the parent of this GridList as a list of ReactNodes.

I don’t want the implementation of widgets to be in the scaffolding component; I only want it to be in charge of handling order and drag-drop.

However, when I do something like this:

function WidgetsArea({widgets}) {
  return <>
    // ... stuff ...
    <GridList items={widgets}>
      {widget => <GridListItem>{widget}</GridListItem>}
    </GridList>
  </>
}

function SomeWidget() {
  return <>
    // ... widget contents ...
  </>
}

function ComponentThatUsesWidgets() {
  return <>
    // ... stuff ...
    <WidgetsArea widgets={[
      <SomeWidget/>,
      <SomeWidget/>,
      <SomeWidget/>
    ]}/>
  </>
}

I see type errors in WidgetsArea where I try to render {widgets}.

Type 'object' is not assignable to type 'ReactNode | ((values: GridListItemRenderProps & { defaultChildren: ReactNode; }) => ReactNode)'.ts(2322)

types.d.ts(54, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & GridListItemProps<object> & RefAttributes<HTMLDivElement>'

I can’t tell if this can be solved entirely in TypeScript (I’m new to TS in React) or because GridListItem simply can’t take children like this.

Before I move on to using another drag-drop library, I want to confirm React-Aria will actually not support what I want to achieve, since I’m already using it as my component library.