Integrating jQuery plugin with React

Question

I'm using jQuery nestable plugin https://dbushell.com/Nestable/ in my React App. I know that there will be problems when we use jQuery in React.

jQuery nestable solves my business needs, can't find the exact requirements in react drag/nestable components. So I have used this jQuery plugin.

The real problem is : while dragging an element by using this jQuery plugin, it clones the DOM, apart from this everything is in react.

Initialized the jQuery nestable functionality like below:

componentDidMount() {
    this.$node = $(this.nestable); // this.nestable is a ref

    this.$node.nestable({
        group: 1,
        maxDepth: 4,
        expandBtnHTML:"",
        collapseBtnHTML:""
    });
}

the above code will let me drag the group2 among all other DOM elements like below image:

group2 is the draggable element here.

after dragged, I can see that group2 apperaed twice and I guess jQuery plugin clones the dragged element like below:

and in developer tools :

But In react developer tools, I can see that DOM is correct.

I don't know, how to rectify this problem. I'm unable to update the full code here because the code base is large.

In react developer tools, I can see that DOM is correct, and in native DOM is not !!

Is it possible to replace native DOM by virtual DOM after setState or is it possible for react to trace DOM handled by jQuery ?

I accept @ Patrick Evans comments, I'm looking for a solution here or suitable react based component like jQuery nestable.

Any help on this will be helpful.

Answer 1

React-nestable seems to have the same behavior as that jQuery plugin and could save you a lot of trouble. Mixing jQuery with React is super easy to cause trouble in my experience.