Invariant Violation when using React.js

[j0hn]

When using dragula to drag and drop react element's an error is throw because cloning elements will end up having two elements with same data-reactid attribute.

This is what the log says:

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.0.0.1:$0.0.4.1.0.0.3.0

[bevacqua]

Okay. Let me know if you find the fix. Ideally I wouldn't make React-specific changes to dragula

[j0hn]

A possible fix is adding an optional callback to transform the mirror node right after cloning it. That would let the user do whatever it wants with it without adding a react specific fix.

[bevacqua]

Is there the same issue when copying with copy: true?

[j0hn]

Same issue, the copied element will have the same attributes and mess up with react.

[bevacqua]

Resolved in 1.6.0 with event cloned

[bevacqua]

Also if you make a react-dragula component let me know and I'll promote it on the README 🎈

[j0hn]

Awesome, thank you. Will consider doing a react component but dragula is simple enough to just use it as is.

[bevacqua]

That's good to know

[saulshanabrook]

@j0hn Would you be willing to show some of your react code using dragula? A simple example would be great to see.

[j0hn]

@saulshanabrook Here's somehow what i'm doing...

dragula([...], {
  direction: 'horizontal',
}).on("cloned", function(clone){
  clone.removeAttribute('data-reactid');
  var descendents = clone.getElementsByTagName('*');
  Array.prototype.slice.call(descendents).forEach(function(child){
    child.removeAttribute('data-reactid');
  });
});

[saulshanabrook]

@j0hn Why do you have to remove the data-reactid? What happens if you dont?

[j0hn]

@saulshanabrook if you don't remove the reactid, there would be two elements on the dom with the same reactid and the react engine will fire warnings about that.

[saulshanabrook]

@j0hn thank you. Also, when do you call the dragula? Like if I have a list of elements from the props, would I call dragula(...) in componentDidMount?

[j0hn]

@saulshanabrook yes, i did a component that renders the list of elements and uses dragula in the componentDidMount

[bevacqua]

FWIW everyone, made react-dragula so we can further tweak react-specific dragula there. Of course, we would still need to expose primitives in dragula if they're needed by react-dragula.

https://github.com/bevacqua/react-dragula

[saulshanabrook]

@bevacqua Thats great! thank you so much 👍