react-complex-tree icon indicating copy to clipboard operation
react-complex-tree copied to clipboard

Tree fails to render or appear in DOM

Open ck-cklinger opened this issue 6 months ago • 2 comments

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.

ck-cklinger avatar Aug 08 '24 17:08 ck-cklinger