How can I edit and delete node in react-sortable-tree?

Question

I have to do drag and drop tree view using react-sortable-tree. And also I need crud operations in my tree view. I have done to add, edit and delete into my parent node on tree view. Unexpectedly, I have some issues whenever I drag my node that time my first-child will edit and after that updated properly, but could not work delete functions, and also nth-child will not work properly to add, edit and delete node.

My code sandbox live link.

Answer 1

The problem is you are updating the state using old setState syntax. Like this,

setState({ stateKey: stateValue });

But new useState hook doesn't need the stateKey. You can update the state by just calling the setState(stateValue).

So, instead of writing this,

settreeData({
      treeData: removeNodeAtPath({
        treeData: treeData,
        path: path,
        getNodeKey: ({ treeIndex: number, node: TreeNode }) => {
          return number;
        },
        ignoreCollapsed: false
      })
    });

You should write this,

settreeData(
      removeNodeAtPath({
        treeData: treeData,
        path: path,
        getNodeKey: ({ treeIndex: number, node: TreeNode }) => {
          return number;
        },
        ignoreCollapsed: false
      })
    );

Here is the working code link.