New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Invariant Violation when using React.js #56
Comments
Okay. Let me know if you find the fix. Ideally I wouldn't make React-specific changes to |
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 |
Is there the same issue when copying with |
Same issue, the copied element will have the same attributes and mess up with react. |
Resolved in |
Also if you make a |
Awesome, thank you. Will consider doing a react component but dragula is simple enough to just use it as is. |
That's good to know |
@j0hn Would you be willing to show some of your react code using dragula? A simple example would be great to see. |
@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');
});
}); |
@j0hn Why do you have to remove the data-reactid? What happens if you dont? |
@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. |
@j0hn thank you. Also, when do you call the dragula? Like if I have a list of elements from the props, would I call |
@saulshanabrook yes, i did a component that renders the list of elements and uses dragula in the |
FWIW everyone, made |
@bevacqua Thats great! thank you so much 👍 |
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:
The text was updated successfully, but these errors were encountered: