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?