Error when removing nodes

[dberardo-com]

Describe the bug
I have implemented the following recursive routine to remove nodes and nested children.

export const removeNodeWithChildren = (
  initalTree: TreeProps,
  nodeIndex: TreeItemIndex
): TreeProps => {
  let newTree: TreeProps = {
    rootItem: initalTree.rootItem,
    treeId: initalTree.treeId,
  };

  let node = initalTree[nodeIndex];
  // remove node from tree
  Object.entries(initalTree).map(([k, n]) => {
    if (k != node.index) newTree[k] = n;
  });

  // remove all reference of nodes from tree
  newTree = removeChildrenFromAllNodes(newTree, [node]);
  
  node.children?.map((c) => (newTree = removeNodeWithChildren(newTree, c)));
  return newTree;
};

const removeChildrenFromAllNodes = (
  initialTree: TreeProps,
  nodes: TreeItem[]
) => {
  let oldParentNodes = {};
  nodes.map((node) => {
    let oldParent = Object.values(initialTree).filter((n) =>
      n.children?.includes(node.index)
    )[0];
    if (!oldParent) return;
    let newParent =
      oldParentNodes[oldParent.index] ?? initialTree[oldParent.index];
    oldParentNodes[oldParent.index] = {
      ...(newParent ?? {}),
      children: newParent.children.filter((c: string) => c != node.index),
    };
    oldParentNodes[oldParent.index].hasChildren =
      oldParentNodes[oldParent.index].children?.length > 0;
  });
  return { ...initialTree, ...oldParentNodes };
};

The routine above seems to work by looking at the console.log(), but when i set the state with the new reduced tree i get the following error:

useTreeItemRenderContext.js:47 Uncaught TypeError: Cannot read properties of undefined (reading 'index')
    at useTreeItemRenderContext.js:47
    at Array.find (<anonymous>)
    at _a (useTreeItemRenderContext.js:47)
    at updateMemo (react-dom.development.js:15463)
    at Object.useMemo (react-dom.development.js:15920)
    at useMemo (react.development.js:1521)
    at useTreeItemRenderContext (useTreeItemRenderContext.js:39)
    at TreeItem (TreeItem.js:18)
    at renderWithHooks (react-dom.development.js:14803)
    at updateFunctionComponent (react-dom.development.js:17034)
(anonymous) @ useTreeItemRenderContext.js:47
_a @ useTreeItemRenderContext.js:47
updateMemo @ react-dom.development.js:15463
useMemo @ react-dom.development.js:15920
useMemo @ react.development.js:1521
useTreeItemRenderContext @ useTreeItemRenderContext.js:39
TreeItem @ TreeItem.js:18
renderWithHooks @ react-dom.development.js:14803
updateFunctionComponent @ react-dom.development.js:17034
beginWork @ react-dom.development.js:18610
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
2react_devtools_backend.js:2528 The above error occurred in the <TreeItem> component:
    in TreeItem (created by TreeItemChildren)
    in ul (created by TreeItemChildren)
    in TreeItemChildren (created by TreeManager)
    in div (created by TreeManager)
    in div (created by TreeManager)
    in TreeManager (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by Sidebar)
    in ForwardRef (created by ForwardRef)
   ....

[lukasbach]

I could replicate a similar issue, but I am not totally sure whether it is the same as the one you experienced. I've pushed a fix with the version v1.1.3, can you please update the dependency on your side and report back to me if the issue persists? Thank you.

[dberardo-com]

it seems that the latest version fixes this issue.

i am glad to see that the issue was not on the custom remove algorithm i have been implementing :D

is there an "official" way to implement node removal? would be nice to have it in the doc

[lukasbach]

Happy that it solved your problem :) The library focuses on rendering the tree, managing the lifecycle of the tree data is something I would rather not move into the library focus due to not make it too broad.

[dberardo-com]

i do agree, but maybe suggesting canonical ways to do that in a separate section of the documentation could be helpful, since i assume that node removal is also a common operation.

if you need to, you can take my code snippet above as a starter, but i cannot guarantee that t will work for all situations.

will let you close this issue.

[lukasbach]

I understand that you might prefer guides on specific topics like that, but one of the benefits of this library is that it does not make any assumptions on anything not related to rendering the tree. There are lots of ways of doing this, there also exist libraries for this (e.g. npm: tree-util or data-tree). And from my experience, documentation can become stale very quickly with changing code, especially for smaller projects that are not backed by big communities, which is why I don't want to add anything for this. But I think this issue will definitely be a good starting point for others that have similar problems, with your code as example for a custom implementation or by using one of these libraries:

• https://www.npmjs.com/package/tree-util
• https://www.npmjs.com/package/data-tree