React-sortable-tree: Could you provide example off adding node dynamically to tree?

[beratuslu]

I am updating treeData in state but it waits for change event to show new node? What could be the possible solution?

Thank you..

[fritz-c]

Please check this issue for a possible solution:
https://github.com/fritz-c/react-sortable-tree/issues/26

[anil1712]

@fritz-c I needed exactly same solution. I tried #26 but its not working as expected. First of all how to get index ?

Can you just give a simple example to update any single node title.

Thanks

[robhadfield]

Re changing title - Take a look at the helper methods file, it has functions for navigating the tree.

Here's my title update using changeNodeAtPath from the helper file tree-data-utils.js

/*
 * Change node title in place
 */
changeNodeTitle(rowInfo, e) {
    const {
        treeData
    } = this.props;

    let {node, treeIndex, path} = rowInfo;

    let newTreeData = changeNodeAtPath({
        treeData: treeData,
        path: path,
        newNode: { title: e.target.value },
        getNodeKey: ({ treeIndex }) =>  treeIndex
    });

    this.updateTree( newTreeData ); // My own local function for updating state (Redux)
}

[robhadfield]

Re updating the state - Without a code example I'm not sure how you're updating currently but I find that creating a new object is a reliable way of ensuring you're pushing 'new' data.

let newTreeData = Object.assign( [], currentTreeData);
// Make any changes the 'newTreeData' tree here... then...
this.setState({ myTree: newTreeData });

This means that you don't walk into any issues with updating const too.

[robhadfield]

@fritz-c - It might be worth getting some simplified demos using the helper files? Happy to help if I can and then adding them to the examples folder.

[LogicMonsters]

I would say, no need to clone the treeData object before you update the tree if you are using the returned treeData from helper func (because it is already cloned).
Considering deep clone an object is time-consuming.

[robhadfield]

Apologies, I hadn't looked that deeply into the helper itself but we useRedux and changing an object straight from the store can cause issues. If the helper returns a cloned object then I agree to disregard that step :)

[fritz-c]

There is an example in the storybook now demonstrating how to update a node title dynamically:
https://fritz-c.github.io/react-sortable-tree/storybook/?selectedKind=Basics&selectedStory=Modify%20nodes&full=0&down=1&left=1&panelRight=0&downPanel=storybook%2Fnotes%2Fpanel