React and jQuery DOM manipulation

Question

I am building an application that requires a drag and drop interface as well as the ability to connect the dropped elements and build a flow chart.

I am using React and jsplumb. I know jsplumb uses jQuery and its not recommended to use jQuery and React together but it would require a substantial time investment to build a custom jsplumb alternative.

I have adding elements working as expected but I have run into some issues with removing elements from the DOM.

This is the basic structure:

I have a piece of state called myArray in a parent component. When a user drops an icon onto the drop area, I am creating a new object to represent the dropped item and then pushing it onto the myArray. I then call setState to update the myArray state. The myArray is passed into a render nodes component as props:

<RenderNodes myArray={this.state.myArray} />

Then in the RenderNodes component, I am looping through each element in the array and using jsplumb to make it draggable, make a target, source, etc…

example:

jsPlumb.draggable(elementStateId, {});

jsPlumb.makeTarget(elementStateId, {
  anchor: 'Continuous',
  endpoint: ["Dot", {
    radius: 3
  }],
  maxConnections: 4
});

jsPlumb.makeSource(elementConnectId, {
  parent: elementStateId,
  anchor: 'Continuous',
  endpoint: ["Dot", {
    radius: 3
  }],

  connectorOverlays: [
    ["Arrow", { width: 15, length: 15, location: 1, id: "arrow" }]
  ]
});

When a user deletes an element from the draggable area, I need to remove the div form the DOM. So I am calling:

jsPlumb.remove(elementStateId);

as well as removing the element form the myArray piece of state.

var newArray = myArray.splice(elementIndex, 0);

this.setState({
    myArray: newArray
});

This will cause the RenderNodes component to re-render and also causes the following error.

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I imagine this is because I am removing an element form the DOM with jQuery and then React is trying to do its DOM manipulation in the background and it's clashing with my jQuery updates

I am not an expert with React so I am not sure how I should go about solving this issue? I am open to any suggestions.

Answer 1

Make each node a component and then detach the connections when it's unmounted. Don't use jsPlumb.remove() at all.

componentWillUnmount () {
    jsPlumb.detachAllConnections(this.props.elementStateId);
}