0

I need to update the node into to edited node. when I edit and update the node means that node to add parent node. kindly help me to fix those issues. I would attach my project code sandbox link below.

https://codesandbox.io/s/practical-goldberg-5g7nl?file=/src/App.js

Saranya S
  • 13
  • 6

2 Answers2

0

I think we need to change a few things

need to keep event.treeIndex in setcurrentNodeItem like this

const EditNode = (event) => {
   ...
   const treeIndex = event.treeIndex;
   setcurrentNodeItem(treeIndex);
}

UpdateNodeComponent value should be changed as follows:

<UpdateNodeComponent
    value={treeData[currentNodeItem]?.title} // <=
    updateNode={(data) => updateNode(data)}
    action={action}
/>

and: updateNode, the function will look like this:

const updateNode = (data) => {
  if (action === "edit") {
    settreeData((prevData) => {
      return prevData.map((item, index) => {
        if (index === currentNodeItem) {
          const updatedItem = {
            title: data
          };
          return updatedItem;
        }
        return item;
      });
    });
    setaction("add");
  } else {
    if (data) {
      settreeData([...treeData, { title: data }]);
      setaction("add");
    }
  }
};
Vahe Nikoghosyan
  • 429
  • 6
  • 6
0

To edit title (or other hidden fields) of a node, you need to :

(1). get the node from your tree data by calling getNodeAtPath()

(2). edit the fields of the retrieved node

(3). call your_react_component.setState() to re-render the tree view,

For example:

import SortableTree, {getNodeAtPath} from 'react-sortable-tree';
...
export default class your_react_component extends Component {
    // ...... other functions like constructor , etc.
    getNodeKey(node) {
        // this example uses tree index as node key
        return node.treeIndex;
    }

    update_tree_status(evt) {
        // the function is an event handler of a button click for each node
        // step #1 : first retrieve path of the target node
        var btn_dom = evt.nativeEvent.target;
        var path = btn_dom.dataset.node_key_path;
        path = path.split(',');
        path = path.map(key => parseInt(key));
        // step #2: get the node object
        let found_node = getNodeAtPath({
           treeData: this.state.treeData,
           path    : path, // list of tree indexes on the editing node
           getNodeKey: this.getNodeKey
        });
        // step #3: updating title or other fields of the node
        // step #4: re-render the tree view
        this.setState({treeData : this.state.treeData})
    }
    // ..................
    render() {
        return <SortableTree isVirtualized={ false }
                treeData={this.state.treeData}
                onChange={this.on_state_change.bind(this)}
                generateNodeProps={
                    ({node, path, treeidx}) => ({
                        title: node.title,
                        buttons: [
                            <button data-node_key_path={ path.join(',') }
                                onClick={ this.update_tree_status.bind(this) }>
                                edit
                            </button> ,
                        ],
                    })
                }
            /> ;
    } // end of render function
};
Ham
  • 703
  • 8
  • 17