React : multiple grids crashes

[PlugNPush]

Hi,

I wanted to test gridstack for my project and made a very basic grid like this:

export function GridStackPage() {
  const [grid1Options] = useState(() => createGridOptions());
  const [grid2Options] = useState(() => createGridOptions());

  return (
    <div style={{ display: "flex", gap: "20px" }}>
      <div style={{ flex: 1 }}>
        <h3>Grid 1</h3>
        <GridStackProvider initialOptions={grid1Options}>
          <Toolbar gridNumber={1} />
          <GridStackRenderProvider>
            <GridStackRender componentMap={COMPONENT_MAP} />
          </GridStackRenderProvider>
        </GridStackProvider>
      </div>
      <div style={{ flex: 1 }}>
        <h3>Grid 2</h3>
        <GridStackProvider initialOptions={grid2Options}>
          <Toolbar gridNumber={2} />
          <GridStackRenderProvider>
            <GridStackRender componentMap={COMPONENT_MAP} />
          </GridStackRenderProvider>
        </GridStackProvider>
      </div>
    </div>
  );
}

Whenever I want to add a widget in them, it works fine for the last one but crashes for all the ones before (here grid 1).

The reason for the crash is :

Uncaught Error: Widget container not found for id: widget-39vq52659p5
    children grid-stack-render.tsx:55
    GridStackRender grid-stack-render.tsx:47
    React 18
    current grid-stack-render-provider.tsx:35
    renderCB grid-stack-render-provider.tsx:41
    createWidgetDivs utils.ts:128
    addWidget gridstack.ts:470
    addSubGrid grid-stack-provider.tsx:60
    onClick GridStackDemo.tsx:210

It comes from GridStackRenderProvider, in

<GridStackRenderContext.Provider
        value={useMemo(
          () => ({
            getWidgetContainer: (widgetId: string) => {
              return widgetContainersRef.current.get(widgetId) || null;
            },
          }),
          // ! gridStack is required to reinitialize the grid when the options change
          // eslint-disable-next-line react-hooks/exhaustive-deps
          [gridStack]
        )}
      >
        <div ref={containerRef}>{gridStack ? children : null}</div>
      </GridStackRenderContext.Provider>

as widgetContainersRef.current.get(widgetId) unexpectedly returns undefined.

I would appreciate some help here.

[adumesny]

I don't use React. I assume you are using GridStackProvider and other custom tags from the /rect example ?
I would check with those dev who worked on it @Aysnine and #2938

[PlugNPush]

Yes, I copied the whole lib/ folder from the react example, and basically duplicated the grids from the first provider. I can't get the two of them to work, only the last one does.

Note that only adding a component in a grid is not working, for example, I am able to add a component in the last grid and then drag it over to the one dysfonctionning with no issues.

While trying to bypass this problem, I encountered another: in react there doesn't seem to be a fast forward way to add a component in a subgrid...

[Aysnine]

Hi there.
I just updated the react example and submitted the pr. Can you try to provide a minimally reproducible case in this codesandbox using the latest libs?

https://codesandbox.io/p/sandbox/github/Aysnine/gridstack-react/tree/main?file=/src/App.tsx

[adumesny]

@Aysnine thanks for being active on that code. I actually wanted to start shipping them like I do for /angular
I started looking at the code and was planning to do this weekend... I wanted to match better what I did for angular wrapper (extending WidgetItem to have similar to 'selector' + 'input' which are angular centric but conceptually the same as name + props you have, rathern than JSON string in content. I'll have to think about having a custom data T type, or changing 'content'