Using jsPlumb with React

Question

I am rendering some elements from react and connecting using jsPlumb. Every time there is a change in the config I am reconnecting the nodes. But I get errors from jsPlumb starting from the second rendering like

.each iteration failed : TypeError: Cannot read property 'force' of undefined

Then all drag/move interaction from jsplumb stops working with errors.

What would be the best way to reset jsPlumb instance with removing all endpoint references and connections? I am doing jsPlumbInstance.reset() but its not helping.

Answer 1

What I do is I use a component for each edge that just renders an empty div and pass the edge info and jsplumb instance in through the props. Then the parent component keeps track of what edges are connected.

In the parent class:

var edgeComponents = []
validEdges.forEach(
    
  edge => {
    
    edgeComponents.push(
    
      <Edge
        key={${edge.source}-${edge.target}}
    
        edge={edge}
    
        jsPlumb={this.state.jsPlumbInstance}
    
      />
)
  }
)

The child class:

export default class Edge extends Component {
  componentDidMount(){
    const edge = this.props.edge
    const connection = this.props.jsPlumb.connect({source:edge.source, target:edge.target})
    this.setState({connection: connection})
  }

  componentWillUnmount () {
    this.props.jsPlumb.detach(this.state.connection)
  }
}