How to call component on onclick of node from react-d3-tree

Question

        class WorkflowDesign extends React.PureComponent {
          state = {};

          componentDidMount() {
            const dimensions = this.treeContainer.getBoundingClientRect();
            this.setState({
              translate: {
                x: dimensions.width / 2,
                y: dimensions.height / 2
              }
            });
          }


          render() {
            return (
              <div style={containerStyles} ref={tc => (this.treeContainer = tc)}>
                <Tree
                  data={this.props.data}
                  translate={this.state.translate}
                  orientation={'vertical'}
                  collapsible={false}
                  directed={false}
                  onClick={(nodeData, evtData) => {
                    if (nodeData.type === 'FLOW') {
                      this.props.getFlowNodeStartId(nodeData);
                    }
                    return;
                  }}

                  allowForeignObjects
                  nodeLabelComponent={{
                    render: <CollapsedBreadcrumbs data={this.props.breadcrumbtartNodeId} />,
                    foreignObjectWrapper: {
                      y: 24
                    }
                  }
                  }

                />
              </div>
            );
          }
        }

I have tried with [react-d3-tee][1] but its not allowing me to call component inside onclick, So please help me out how to call component on onclick with some conditions, I have mention on the above code

I wanted to call component on onclick which I have wrote onclick function with some condition

      [1]: https://www.npmjs.com/package/react-d3-tree

Answer 1

That's how I do it:

    handleClick = (nodeData, evt) => {
       console.log(nodeData, evt);
     }

in the Tree

    onClick={this.handleClick}

Answer 2

I guess the props that you are looking for is onNodeClick

<Tree 
    data = {this.props.data} 
    onNodeClick = {this.handleClick.bind(this)} 
/>

and you can use it like:

handleClick(nodeData, evtData){
    // your code 
    if (nodeData.type === 'FLOW') {
         this.props.getFlowNodeStartId(nodeData);
    }
    return;
}

You can find out more in the documentation here.