How to use nodeContentRenderer with event handler on NodeContentRenderer component ?

[dylanBcp]

Hi,

I'm using the nodeContentRenderer props to customise the style of the sortable tree. I need to had an add and a remove button in every node. To customise like I want and add buttons, I copied the node-renderer-default.js and I had handleAddNode and handleRemoveNode props to it with the UI of the buttons.

Below, is an example where I called my SortableTree with the custom Node component and the function to handle the node remove.

export default function Contributions(props) {
  const [items, setItems] = useState(props.categories);

  const handleRemoveNode = useCallback((e, path) => {
    const newItemsFiltered = removeNodeAtPath({
      treeData: items,
      path,
      getNodeKey: ({ node }) => node.id,
    })
    setItems(newItemsFiltered);
  }, [items]);

  return (
    <AuthenticatedLayout>
      <div className="container mx-auto py-12 max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="pt-3 pb-8 w-full bg-white rounded-lg relative flex flex-col">
            ...
            <div className="flex" style={{ height: 1000 }}>
              <SortableTree
                treeData={items}
                getNodeKey={({ node, treeIndex }) => node.id }
                onChange={items => setItems(items)}
                maxDepth={2}
                nodeContentRenderer={(props) => <CustomNodeContentRenderer {...props} items={items} handleRemoveNode={handleRemoveNode} />}
              />
            </div>
          </div>
        </div>
      </div>
    </AuthenticatedLayout>
  )
}

I have an issue in my handleRemoveNode function. Every call, my items state was set to the initial value and i don't know why this happening... Somebody can help me ? 🙏