How to use generate node props

Hi @fritz-c I’m really liking your project but I keep running into questions with generateNodeProps. I was trying to highlight node onClick event to work. and with the help of the issues I was able to but now I can’t add in buttons so I’m not sure how these things work together is there something Im missing? here is the component below with highlight node working based on examples in the issues.

<SortableTree
      treeData={this.state.treeData}
      onChange={treeData => this.setState({ treeData })}
       getNodeKey={({ node }) => node._id}
       generateNodeProps={rowInfo => {
       let nodeProps =  { onClick: event => this.nodeClicked(event, rowInfo) };
           if (this.state.selectedNodeId === rowInfo.node._id) {
                  nodeProps.className = 'selected-node';
           }
       return nodeProps;
        }}
        onMoveNode={args => this.handleMovedNodes(args)}
        onVisibilityToggle={args => this.handleToggleVisiblity(args)}
 /> 

Any help would be appreciated!

[charue808]

Hello, so I was able to figure out how to get this to work and will close it out. In case other noobs have this issue.

Here is the code from my original question:

<SortableTree treeData={this.state.treeData} onChange={treeData => this.setState({ treeData })} getNodeKey={({ node }) => node._id} generateNodeProps={rowInfo => { let nodeProps = { onClick: event => this.nodeClicked(event, rowInfo) }; if (this.state.selectedNodeId === rowInfo.node._id) { nodeProps.className = ‘selected-node’; } return nodeProps; }} onMoveNode={args => this.handleMovedNodes(args)} onVisibilityToggle={args => this.handleToggleVisiblity(args)} />

I hypothesised that since nodeProps object is being return, maybe as a callback?, that I needed to have addtional elements included in nodeProps.

<SortableTree treeData={this.state.treeData} onChange={treeData => this.setState({ treeData })} getNodeKey={({ node }) => node._id} generateNodeProps={rowInfo => { let nodeProps = { onClick: event => this.nodeClicked(event, rowInfo), buttons: [ <button className=“btn btn-danger” key={rowInfo.node._id} onClick={() => console.log(‘clicked’, rowInfo.node)} > Remove </button>, ], }; if (this.state.selectedNodeId === rowInfo.node._id) { nodeProps.className = ‘selected-node’; } return nodeProps; }} onMoveNode={args => this.handleMovedNodes(args)} onVisibilityToggle={args => this.handleToggleVisiblity(args)} />

By adding buttons key to the nodeProps object it now renders the button in all the nodes and I would also venture to guess could use this to render other types elements.

[charue808]

@huiman Hey, So my preliminary code that to get buttons to render on the nodes and be able to highlight it is in the comment

 <SortableTree
              treeData={this.state.treeData}
              onChange={treeData => this.setState({ treeData })}
              getNodeKey={({ node }) => node._id}
              generateNodeProps={rowInfo => {
                let nodeProps =  { onClick: event => this.nodeClicked(event, rowInfo),
                   Buttons: [
                      <button
                          className="btn btn-danger"
                          key={rowInfo.node._id}
                          onClick={() => console.log('clicked', rowInfo.node)}
                     >
                       Remove 
                     </button>
                    ],
                  };
                   if (this.state.selectedNodeId === rowInfo.node._id) {
                       nodeProps.className = 'selected-feature-node';
                   }
                return nodeProps;
}}

Since the return is the nodeProps, you can place any buttons within that object. That’s probably a really hack way to do it thought… OR you could do

 <SortableTree
              treeData={this.state.treeData}
              onChange={treeData => this.setState({ treeData })}
              getNodeKey={({ node }) => node._id}
              generateNodeProps={(rowInfo) => {
                    return {
                  {/* Place whatever onClick function or  buttons to render here*/}
               }

}}`

```
That would also work but it's probably more involved in the onClick function you'll call to make the node highlighted.

Hope that helps.