React-sortable-tree: highlight only one node.

[mauridirecta24]

Hi guys,

Im trying to find a way to highlight only a clicked node, I was looking at documentation and found a possible solution:

`generateNodeProps={rowInfo => {
              console.log(rowInfo);
              let nodeProps = {
                onClick: (event: any) => this.nodeClicked(event, rowInfo),
                className: '',
                buttons: [
                  <FontAwesomeIcon
                    icon={{ prefix: 'fal', iconName: 'cogs' }}
                    onClick={this.handleClick}
                  />,
                ],
              };
              if (this.state.selectedNodeId === rowInfo.node.id) {
                nodeProps.className = 'selected-node';
              }
              return nodeProps;
            }}`

But that will keep the selected-node class for every node that was clicked before.

Is there any way to clean the class?

Thanks!

[mauridirecta24]

Hi guys! I figure out!
Just need to add a id property to the tree data.
Then use the state to add the class to the element on the click event like this

  generateNodeProps={({ node, path }) => {
              let nodeProps = {
                onClick: (event: any) => this.nodeClicked(event, node),
                className: '',
 };
if (this.state.selectedNodeId === node.id) {
                console.log(nodeProps);
                nodeProps.className = 'selected-tree-node';
                console.log(nodeProps.className);
              }
              return nodeProps;
}}

nodeClicked = (event: any, node: any) => {
    if (
      event.target.className.includes('collapseButton') ||
      event.target.className.includes('expandButton')
    ) {
      // ignore the event
    } else {
      console.log(node, 'node data');
      this.setState({ selectedNodeId: node.id });
    }
  };