Generate the list keys with the hierarchy reference

README.md

@@ -466,6 +466,14 @@ _node_.**childIndex**
 
 Returns the node's index in relation to its siblings.
 
+_node_.**path**
+
+Returns an array that represents the ancestry of the node, starting from the root node and ending with the current node. Each element in the array corresponds to an ID in the node's hierarchy.
+
+_node_.**key**
+
+Returns the unique React key associated with the node.
+
 _node_.**next**
 
 Returns the next visible node. The node directly under this node in the tree component. Returns null if none exist.

packages/react-arborist/src/components/default-container.tsx

@@ -223,7 +223,7 @@ export function DefaultContainer() {
         width={tree.width}
         itemSize={tree.rowHeight}
         overscanCount={tree.overscanCount}
-        itemKey={(index) => tree.visibleNodes[index]?.id || index}
+        itemKey={(index) => tree.visibleNodes[index]?.key || index}
         outerElementType={ListOuterElement}
         innerElementType={ListInnerElement}
         onScroll={tree.props.onScroll}

packages/react-arborist/src/interfaces/node-api.ts

@@ -115,6 +115,26 @@ export class NodeApi<T = any> {
     }
   }
 
+  get path() {
+    const path = [this.id];
+    let parent = this.parent;
+
+    while (parent) {
+      path.push(parent.id);
+      parent = parent.parent;
+    }
+
+    return path.reverse();
+  }
+
+  get key() {
+    if (this.id) {
+      return this.path.join(',');
+    }
+
+    return null;
+  }
+
   get next(): NodeApi<T> | null {
     if (this.rowIndex === null) return null;
     return this.tree.at(this.rowIndex + 1);