How to use gridstack.js in react 18

[liqiuqiui]

Subject of the issue

I encountered a problem using gridstack in React18. When two grid stacks are dragged and released between each other, the update of the grid item will throw an error of "Failed to execute 'removeChild' on 'Node'". I don't know how to solve this problem so that the grid stack can be used normally in React18

If unsure if lib bug, use slack channel instead: https://join.slack.com/t/gridstackjs/shared_invite/zt-27q0rwf80-5vCt81Z_hfVgpRW7L17MnQ

Your environment

• version of gridstack.js v10.0.1
• which browser/OS Chrome 120.0.6099.109

Steps to reproduce

The reproducing step is to directly change the react and react dom versions in the react books controlled multiple demo from 16 to 18, and then change the ReactDOM.render(<ControlledExample/>, document. getElementById ('controlled-stack')to ReactDOM.createRoot (document.getElementById ('controlled-stack')).render(<ControlledExample/>) and drag a widget to the other side to trigger the bug

You MUST provide a working demo - keep it simple and avoid frameworks as that could have issues - you can use https://jsfiddle.net/adumesny/jqhkry7g

Expected behavior

Tell us what should happen. If hard to describe, attach a video as well.

[adumesny]

please provide a running example - don't have me follow your steps to create one...

[liqiuqiui]

please provide a running example - don't have me follow your steps to create one...

Sorry for my mistake, this is the online link: https://jsfiddle.net/74xzgkdc/

[fredericrous]

what is working for me on react is to assign each node an id and replace the content of each node by the content of a react portal. That way I let gridstack manipulate the dom

[QiuYiLiang]

You can use wrapper element @liqiuqiui

[Suesanz]

You can use wrapper element @liqiuqiui

@QiuYiLiang Is this working for you? It's not working for me, because the issue remains the same here as well. When you drag and drop across grids, your element parent has changed in real DOM but not in virtual DOM and when react tries to delete it, because of parent mismatch it throws the error.

[QiuYiLiang]

@Suesanz Yes, this is my example https://codesandbox.io/p/github/QiuYiLiang/test-gridstack/main

[Suesanz]

@QiuYiLiang I was referring to moving items across 2 grids. Your example has 1 grid and another subgrid inside it. And AFAIK grid-stack-item should be an immediate child of grid-stack.

[QiuYiLiang]

@Suesanz 2 grids also work fine

[QiuYiLiang]

grid.load will move the grid-stack-item element below grid-stack, and the wrapper element will be retained for deletion by react to avoid errors.

[adumesny]

heads up - in Angular I don't use ngFor loop to layout the widgets and create the grid - for exactly the reason above (keeping Angular GS in sycn is a pain). instead I let angular create the CONTENT of those gridItem with custom components/tags/etc... the grid itself is created using load() from a complete JSon (which gets saved to backend). dragging between grids (and also not wanting to re-create things) is much easier that way. React/Vue (which I don't know) should benefit the same...

[adumesny]

can one of you React dev update the demos to showcase the way to do it ? I don't know React

closing as there are way to get it working, as clearly demonstrated by my Angular version (same virtual DOM issues)