React-sortable-tree: path in removeNode

[vladimirsvsv77]

I try remove my Node, how I can get path in my case?

export default class TreeVera extends Component {
    constructor(props) {
        super(props);
        this.updateTreeData = this.updateTreeData.bind(this);
        this.removeNode = this.removeNode.bind(this);
        this.state = {
            treeData: [{
                title: (<div>
                        <input />
                        <button onClick={this.removeNode}>remove</button>
                    </div>),
            }]
        };
    }
    removeNode(e){
        this.setState({
               treeData: removeNodeAtPath({
                   treeData: this.state.treeData,
                   path: ????,
                   getNodeKey: ({node: TreeNode, treeIndex: number}) => {
                       console.log(number);
                       return number;
                   },
                   ignoreCollapsed: false,
               })
        })
    }
    updateTreeData(treeData) {
        this.setState({ treeData });
    }
    render() {
        return (
            <div style={{ height: 600 }}>
                <SortableTree
                    treeData={this.state.treeData}
                    onChange={this.updateTreeData}
                />
            </div>
        );
    }
}

[anil1712]

Try to use generateNodeProps to create delete button.

<SortableTree
     treeData={this.state.treeData}
     onChange={treeData => this.onChange(treeData)}
     generateNodeProps={rowInfo => ({
         buttons: [
                   <Button label='Delete'
                            onClick={(event) => this.removeNode(rowInfo)}/>,
                ],
      })}

removeNode(rowInfo) {
    let {node, treeIndex, path} = rowInfo;
    removeNodeAtPath({
                   treeData: this.state.treeData,
                   path: path,   // You can use path from here
                   getNodeKey: ({node: TreeNode, treeIndex: number}) => {
                       console.log(number);
                       return number;
                   },
              ignoreCollapsed: false,
           })
}

I am using the same way but some how getting below exception in browser console
Uncaught (in promise) Error: No node found at the given path.
Let me know if its working for you

@fritz-c can you please check am I doing something wrong.

Thanks,

[vladimirsvsv77]

Thanks, your code works perfect!

[fritz-c]

@anil1712 Thank you for adding your code. I've been busy outside of work lately, so it helps when members in the community help out.

Regarding the node error, could you give me the stack trace and steps for reproduction?

Your code looks like it would work except for one part - the result of removeNodeAtPath needs to be used to update this.state.treeData in your component.

[anil1712]

Thanks for reply @fritz-c
Now its also working for me.

[GayathriVenkatesan93]

Hello, Can anyone please help with this and how to remove any node in the tree. Why because means I was trying the above same code in the functional component and got the error like this

Error: No node found at the given path.