Save react-grid-layout overlapping changes when the web browser reloads

Question

I want to create widgets. Resize, drag, overlap. Although it is possible to overlap, the position is not saved when the web browser reloads it. I want to know what should I do to save grid items.

This is react-grid dependency

"react-grid-layout": "^1.3.0",

Here is the code written to control the grid items.

          <ResponsiveGridLayout
            className="gridLayout"
            allowOverlap={true}
            isDraggable={EditState}
            isResizable={EditState}
            onLayoutChange={handleOnLayout}

            rowHeight={5}
            breakpoints={{
              xlg: 400,
              lg: 200,
              md: 96,
              sm: 8,
              xs: 80,
              xxs: 0,
            }}
            cols={{ xlg: 100, lg: 24, md: 18, sm: 18, xs: 10, xxs: 10 }}
            autoSize={true}
            margin ={{
              xlg: [0, 0],
              lg: [0, 0],
              md: [0, 0],
              sm: [0, 0],
              xs: [0, 0],
              xxxs: [0, 0],
            }}
          >

As shown in this photo. Grid items can be created, dragged, resized, and overlapped. These positions are not saved when the web browser is reloaded.

I would very much appreciate your suggestions to solve this problem.

I tried different ways to solve this problem. But it failed. Edit State because the method to be saved when edited is coded. Tried "allowOverlap={EditState}" but it didn't work. Also tried both true and false but it doesn't work.

Answer 1

I solved this problem of mine. I will explain the solved problem which may be useful to someone else.

There was a problem with the package I installed. I was able to fix the problem when I updated it to the new version.

update package.json file

 "react-grid-layout": "^1.3.4",

then,

yarn install