Material-UI - How to pass custom props to a custom TreeItem?

Viewed 1248

I need to pass an argument category to CustomTreeItem which is TreeItemContent.
Doc: https://mui.com/ru/api/tree-item/

import TreeItem, {
  TreeItemProps,
  useTreeItem,
  TreeItemContentProps,
} from '@material-ui/lab/TreeItem';

interface CatProps {
  name: string,
  id: string,
}

interface CatItemContentProps extends TreeItemContentProps {
  category: CatProps,
}

const CustomContent = React.forwardRef(function CustomContent(
    props: CatItemContentProps,
    ref,
  ) {
    const { category } = props;
    console.log(category); // undefined

  return <></>;
  }
);


interface CatItemProps extends TreeItemProps {
  category: CatProps,
}

const CustomTreeItem = (props: CatItemProps) => {
  return (
    <TreeItem ContentComponent={CustomContent} {...props} />
  );
};

How can I do it?

Сlarifications after the first answer

The new code is:

const CustomContent = React.forwardRef(function CustomContent(
  props: TreeItemContentProps,
  ref
) {
  return (
    <div ref={ref as React.Ref<HTMLDivElement>}>
      {props.label} {props.myProps}
    </div>
  );
});

const CustomTreeItem = (props: TreeItemProps) => {
  return <TreeItem ContentComponent={CustomContent} {...props} />;
};

export default function App() {
  return (
    <TreeView>
      <CustomTreeItem
        nodeId="1"
        label="Applications"
        ContentProps={{
          myProps: "my props"
        }}
      ></CustomTreeItem>
    </TreeView>
  );
}

I've made it in codesandbox and it works fine:
https://codesandbox.io/s/clever-volhard-km9xf?file=/src/App.tsx

But it my code I have a new error:

Type '{ myProps: string; }' is not assignable to type 'HTMLAttributes<HTMLElement>'.
Object literal may only specify known properties, and 'myProps' does not exist in type 'HTMLAttributes<HTMLElement>'

Google gives me the same problem from another person:
https://issueexplorer.com/issue/mui-org/material-ui/28668

Availiable attributes for this type are:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/1349b640d4d07f40aa7c1c6931f18e3fbf667f3a/types/react/index.d.ts#L1743

How can I pass my custom props to ContentProps?

2 Answers

Use ContentProps props, it will be merged with the original TreeItemContentProps

<CustomTreeItem
  nodeId="1"
  label="Applications"
  ContentProps={{
    myProps: "my props",
  }}
>
const CustomContent = React.forwardRef(function CustomContent(
  props: TreeItemContentProps,
  ref
) {
  console.log(props.myProps); // "my props"

EDIT: For typescript users, you also need to augment the prop interface of TreeItemContent to remove the error:

declare module "@material-ui/lab/TreeItem" {
  interface TreeItemContentProps {
    myProps: string;
  }
}

The ContentProps itself can't be augmented, this is a shortcoming from the MUI API, a workaround is simply ignore it:

ContentProps={
  {
    myProps: "my props"
  } as any
}

As per current document follow these steps

I found the way as mentioned on following document

Code Ref: https://github.com/mui/material-ui/blob/512896973499adbbda057e7f3685d1b23cc02de9/docs/src/components/productX/XTreeViewDemo.tsx

Step1 Add custom property along TreeItemContentProps on custom component create

 const CustomContentChildContent = React.forwardRef(function CustomContent(
        props: TreeItemContentProps & { myCustomData?: string },
        ref,
    )

Step2 Add custom property to with TreeItemProps

const CustomTreeItemChild = (
  props: TreeItemProps & {
    ContentProps?: { myCustomData?: string };
  },
) => <StyledTreeItem ContentComponent={CustomContentChildContent} {...props} />;

Step3

Add property in the component you are calling

<CustomTreeItemChild nodeId="3" label={item.name} ContentProps={{ myCustomData: 'anything-i-can-pass' }} />
Related