How to expose the custom Item properties with MUI v5 - RichTreeView?

Question

Is there any way to expose the custom item properties that are received asynchronously with MUI - RichTreeView inside a custom treeItem?

For example, how to get the customProperty1 & customProperty2 inside the CustomTreeItem? Console.log to props shows nothing except the default properties like id, label, etc.

I picked the RichTreeView because my dataset will be huge.

const ITEMS = [
   {
      id: '1',
      label: 'label1',
      customProperty1: false,
      customProperty2: 'ADD',
},

const CustomTreeItem = forwardRef((props, ref) => {
   
   const { id, itemId, label, disabled, children, ...other } = props;

   const { getRootProps, getContentProps, getIconContainerProps, getLabelProps, getGroupTransitionProps, status } = useTreeItem2({
      id,
      itemId,
      children,
      label,
      disabled,
      rootRef: ref,
   });

   console.log('props', props);

   return (
      <TreeItem2Provider itemId={itemId}>
         <TreeItem2Root {...getRootProps(other)}>
            <CustomTreeItemContent {...getContentProps()}>
               <Box sx={{ flexGrow: 1 }}>
                  <Stack direction="row" alignItems="center">
                     <TreeItem2IconContainer {...getIconContainerProps()}>
                        <TreeItem2Icon status={status} />
                     </TreeItem2IconContainer>

                     <TreeItem2Label {...getLabelProps()} />
                  </Stack>
                  {!children && (
                     <Stack direction="row" justifyContent="flex-start" sx={{ pl: 2, ml: 2, mt: 1, backgroundColor: '#2F3B5F', borderRadius: 10, px: 2, my: 1 }}>
                        All spare parts (xxxxx)
                        <Stack sx={{ ml: 'auto' }}>(folder icon here)</Stack>
                     </Stack>
                  )}
               </Box>
            </CustomTreeItemContent>
            {children && <TreeItem2GroupTransition {...getGroupTransitionProps()} />}
         </TreeItem2Root>
      </TreeItem2Provider>
   );
});


 <RichTreeView
    aria-label="icon expansion"
    sx={{ position: 'relative' }}
    items={ITEMS}
    slots={{ item: CustomTreeItem }}
 />

Edit: A Possible solution would be to add this code inside the CustomTreeItem but I am afraid it will slow down the rendering in huge data sets.

console.log('customProperty1', ITEMS.find((item) => item.id === itemId)?.customProperty1);

Answer 1

The final solution is to use the publicAPI object returned by useTreeItem2 which has a getItem method.

example

const CustomTreeItem = forwardRef((props, ref) => {
   const { id, itemId, label, disabled, children, ...other } = props;

   const { getRootProps, getContentProps, getIconContainerProps, getLabelProps, getGroupTransitionProps, publicAPI, status } = useTreeItem2({
      id,
      itemId,
      children,
      label,
      disabled,
      rootRef: ref,
   });

   
   console.log('items=>', publicAPI.getItem(itemId));
   

   return (
      <TreeItem2Provider itemId={itemId}>
         <TreeItem2Root {...getRootProps(other)}>
            <CustomTreeItemContent {...getContentProps()}>
               <Box sx={{ flexGrow: 1 }}>
                  <Stack direction="row" alignItems="center">
                     <TreeItem2IconContainer {...getIconContainerProps()}>
                        <TreeItem2Icon status={status} />
                     </TreeItem2IconContainer>

                     <TreeItem2Label {...getLabelProps()} />
                  </Stack>
                  {!children && (
                     <Stack direction="row" justifyContent="flex-start" sx={{ pl: 2, ml: 2, mt: 1, backgroundColor: '#2F3B5F', borderRadius: 10, px: 2, my: 1 }}>
                        All spare parts (xxxxx)
                        <Stack sx={{ ml: 'auto' }}>(folder icon here)</Stack>
                     </Stack>
                  )}
               </Box>
            </CustomTreeItemContent>
            {children && <TreeItem2GroupTransition {...getGroupTransitionProps()} />}
         </TreeItem2Root>
      </TreeItem2Provider>
   );
});