Unable to get example in the docs to work for Tree

[AlmeroSteyn]

I have made use of the Tree.tsx as an example to build a more basic version of the Tree and TreeItem which I will style later:

import {
  Tree as AriaTree,
  TreeItem as AriaTreeItem,
  TreeItemContent as AriaTreeItemContent,
  Button,
  type TreeItemProps as AriaTreeItemProps,
  type TreeProps
} from 'react-aria-components';
import Checkbox from '@/components/form/checkbox.tsx'
import classNames from 'classnames'

export function Tree<T>({children, ...props}: TreeProps<T>) {
  return (
    <AriaTree
      {...props}
      className={classNames(
        props.className,
        'w-48 max-w-full overflow-auto relative border border-neutral-200 dark:border-neutral-700 rounded-lg'
      )}>
      {children}
    </AriaTree>
  );
}


export interface TreeItemProps extends Partial<AriaTreeItemProps> {
  title: string;
}

export function TreeItem(props: TreeItemProps) {
  console.log(props.title)
  return (
    <AriaTreeItem  textValue={props.title} {...props}>
      <AriaTreeItemContent {...props}>
        {({selectionMode, selectionBehavior, hasChildItems}) => (
          <div className={`flex items-center`}>
            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
              <Checkbox slot="selection" />
            )}
            <div className="shrink-0 w-[calc(calc(var(--tree-item-level)-1)*calc(var(--spacing)*3))]" />
            {hasChildItems ? (
              <Button slot="chevron" >
                Expand
                {/*<ChevronRight aria-hidden className={chevron({isExpanded, isDisabled})} />*/}
              </Button>
            ) : (
              <div className="shrink-0 w-8 h-8" />
            )}
            {props.title}
          </div>
        )}
      </AriaTreeItemContent>
      {props.children}
    </AriaTreeItem>
  );
}

When I try the example at the top of the page with the hardcoded values the tree renders correctly.

But when I want to get the example under https://react-aria.adobe.com/Tree#content working with the same components I used for the example at the top, I get the following console warning:

"Expandable tree items must contain a expand button so screen reader users can expand/collapse the item."

Also the HTML is void of values to display and not fully rendered.

It does not seem that the Collection is working as it should for me.

I used the exact dataset and the exact code for the Tree as in the example under https://react-aria.adobe.com/Tree#content

import {Tree, TreeItem} from './Tree';
import {Collection} from 'react-aria-components/Collection';

let items = [  {id: 1, title: 'Documents', type: 'directory', children: [
    {id: 2, title: 'Project', type: 'directory', children: [
      {id: 3, title: 'Weekly Report', type: 'file', children: []},
      {id: 4, title: 'Budget', type: 'file', children: []}
    ]}
  ]},
  {id: 5, title: 'Photos', type: 'directory', children: [
    {id: 6, title: 'Image 1', type: 'file', children: []},
    {id: 7, title: 'Image 2', type: 'file', children: []}
  ]}
];

<Tree
  aria-label="Files"
  defaultExpandedKeys={[1, 4]}
  items={items}
  selectionMode="multiple">
  {function renderItem(item) {
    return (
      <TreeItem title={item.title}>
        {/* recursively render children */}
        <Collection items={item.children}>
          {renderItem}
        </Collection>
      </TreeItem>
    );
  }}
</Tree>

However due to the code failing I had to change the id's to strings, then it did not through a complete error but then I get the problems mentioned above.

Test data used:

const items = [
  {
    id: '1',
    title: 'Documents',
    type: 'directory',
    children: [
      {
        id: '2',
        title: 'Project',
        type: 'directory',
        children: [
          { id: '3', title: 'Weekly Report', type: 'file', children: [] },
          { id: '4', title: 'Budget', type: 'file', children: [] },
        ],
      },
    ],
  },
  {
    id: '5',
    title: 'Photos',
    type: 'directory',
    children: [
      { id: '6', title: 'Image 1', type: 'file', children: [] },
      { id: '7', title: 'Image 2', type: 'file', children: [] },
    ],
  },
]

Is there a known isue with this? Can anyone see what I doing wrong?

I have used many components from the library and have always got them working from the docs, but this time I am getting stuck.

[reidbarber]

When I click our "Open in Stackblitz" option on that example and open it there, I don't see an issue: https://stackblitz.com/edit/mn37v4ea?file=src%2FExample.tsx

Are you able to reproduce the issue there and share a link?

[AlmeroSteyn]

Thank you for the response, @reidbarber. Really appreciate that you took the time for this.

I have it working now on my side. It is indeed different to the code I tried. I used the Tree.tsx code at the very top example and thought everything built on that.

And to this day had no idea that a code runner was hiding behind that icon next to example, the iconography told me something completely different. Thanks for helping me find it.

Kind regards,
Almero

[reidbarber]

Sounds good! Maybe we can improve that UI to make it more discoverable.