I want to print node contents.

[soosemi]

Hi, i want to print this tree node inside contents in console when i clicked node... i cant find any resolution.. and one more, can i add data like 'connInf', and use another side?

import React from "react";
import {
  StaticTreeDataProvider,
  UncontrolledTreeEnvironment,
  Tree,
} from "react-complex-tree";

export default function AppTester() {
  const child1 = "Time";

  const items = {
    root: {
      index: "root",
      isFolder: true,
      children: ["child1", "child2"],
      data: `Root item ${child1}`,
    },
    child1: {
      index: "child1",
      isFolder: true,
      children: [],
      data: `Child item 1  ${child1}`,
      connInf: "aa",
    },
    child2: {
      index: "child2",
      isFolder: true,
      children: ["child3"],
      data: "Child item 2",
    },
    child3: {
      index: "child3",
      isFolder: true,
      children: [],
      data: "Child item 3",
    },
  };

  const dataProvider = new StaticTreeDataProvider(items, (item, newName) => ({
    ...item,
    data: newName,
  }));

  const handleOnclick = (e) => {
    console.log(e);
  };

  return (
    <UncontrolledTreeEnvironment
      dataProvider={dataProvider}
      getItemTitle={(item) => item.data}
      viewState={{}}
      canDragAndDrop={true}
      canDropOnFolder={true}
      canReorderItems={true}
    >
      <Tree
        treeId="tree-2"
        rootItem="root"
        treeLabel="Tree Example"
        onclick={handleOnclick}
      />
    </UncontrolledTreeEnvironment>
  );
}

[lukasbach]

Hi! The most straight forward solution to your problem is to register a onFocusItem prop on the tree environment or tree, that will trigger whenever the user clicks on an item, and provides the clicked item, as argument: https://rct.lukasbach.com/docs/api/interfaces/TreeEnvironmentConfiguration#onfocusitem

You can also use custom render hooks or custom interaction providers to register custom click events, see the respective docs pages for that.

If you want to carry additional information in your items, you should use the "data" field. It doesn't have to be a string, you can store any data you want in it.