react-complex-tree
react-complex-tree copied to clipboard
Tree fails to render or appear in DOM
Describe the bug
Starting off with this library (this is great by the way, thank you for creating and maintaining this library), so attempting to start pretty basic and then adapt it to my specific needs. I have a component that should hold the tree:
import {
UncontrolledTreeEnvironment,
StaticTreeDataProvider,
Tree,
} from "react-complex-tree";
const CategoryTree = () => {
const readTemplate = (template: any, data: any = { items: {} }): any => {
for (const [key, value] of Object.entries(template)) {
// eslint-disable-next-line no-param-reassign
data.items[key] = {
index: key,
canMove: true,
isFolder: value !== null,
children:
value !== null ? Object.keys(value as Record<string, unknown>) : [],
// : undefined,
data: key,
canRename: true,
};
if (value !== null) {
readTemplate(value, data);
}
}
return data;
};
const categoryItems = {
root: {
container: {
item0: null,
item1: null,
item2: null,
item3: {
inner0: null,
inner1: null,
inner2: null,
inner3: null,
},
item4: null,
item5: null,
},
},
};
const items = readTemplate(categoryItems);
console.log(items);
return (
<UncontrolledTreeEnvironment
dataProvider={
new StaticTreeDataProvider(items, (item, data) => ({
...item,
data,
}))
}
getItemTitle={(item) => item.data}
viewState={{
"tree-1": {
expandedItems: [],
},
}}
>
<Tree treeId="tree-1" rootItem="root" treeLabel="Test" />
</UncontrolledTreeEnvironment>
);
};
export default CategoryTree;
This is basically ripped straight from the docs/example code in the source files, so I would expect it would work.
The issue I'm running into is that the Tree component does not render (I have another parent component that includes <CategoryTree />
as one of its children). There's no error in the console and no flags in my IDE, but it doesn't show up in my browser and I also can't find it in the DOM at all.
Expected behavior
I would expect to see something similar to here: https://rct.lukasbach.com/docs/guides/static-data-provider
Additional context
Currently running in a dev environment using:
- Vite version 5.2.0
- React version 18.2.66
- React complex tree version 2.4.5
Running in Chrome version 127.0.6533.89 on Mac OS Venture (13.0)
I'm happy to provide any other information that may help in figuring this out. I'm probably just doing something dumb and this isn't actually a bug, but I can't be sure of that at the moment.