React-grid-layout: Reset Layout does not re-render the layout

[merttoka]

I am not sure if I am doing the wrong thing or if this is a bug but definitely something is off here. I have a resetLayout function which updates the data-grid entries in the state using the setState function. The data-grid entries are reading their values from this.state.layout. However, nothing happens when resetLayout function gets called. Why this.setState doesn't affect the render at all?

Thanks for submitting an issue to RGL!

Please mark the type of this issue:

• [x] Bug
• [ ] Feature Request
• [x] Question

If you have a question or bug report, please use the WebpackBin Template
to demonstrate. It is much easier for us to help you if you do.

[davidworkman9]

I'm also experiencing this, I just want to be able to toggle between things being static and not static, the props update but the layout grid remains in the originally rendered state.

[merttoka]

I used a workaround to solve the problem. I read something in Github issues that layouts get re-rendered only when the _number of layouts changes_ rather than data-grid items receiving manipulations. That's why whenever I need a re-render, I either add or delete a dummy layout and I keep track of its ID so that I don't actually end up drawing it on the page in the render function.

Is it the best solution, possibly not but it works so far.

[luminaxster]

Had the same issue to reset the layout. For the roamers out there:

restoreGridLayouts=gridLayouts => {
    this.setState({
      gridLayouts: gridLayouts,
    });
  };

 resetGridLayout=() => {
    const hack={...defaultGridLayouts};
    hack.lg=[...hack.lg, {
      i: 'dummy',
      x: 0,
      y: 0,
      w: 0,
      h: 0
    }];
    this.restoreGridLayouts(hack);
    setTimeout(() => {
      this.restoreGridLayouts({...defaultGridLayouts});
    }, 0);

 render() {
    const {gridLayouts}=this.state;
    return (
      <ResponsiveReactGridLayout
        layouts={gridLayouts}
    {//....} />
  };

[benneq]

I had this issue as well. I "fixed" it, by using react-grid-layout as a "normal" React component 🤣

What I've done:

1. have some code where you save a snapshot of the current layout (see handleEditStart)
2. on every onLayoutChange apply the new layout data to your state (see handleLayoutChange)
3. when you want to reset to your saved state, just copy back the saved snapshot (see handleEditCancel)

state = {
    widgets: [
        {
            id: "1",
            layout: {
                x: 1,
                y: 0,
                w: 6,
                h: 2
            }
        }
    ],
    oldWidgets: [],
    edit: false
}

handleEditStart = () => {
    this.setState(state => ({
        edit: true,
        oldWidgets: state.widgets
    }));
}

handleEditDone = () => {
    this.setState(state => ({
        edit: false
    }));
}

handleEditCancel = () => {
    this.setState(state => ({
        edit: false,
        widgets: state.oldWidgets
    }));
}

handleLayoutChange = (layouts) => {
    this.setState(state => {
        return {
            widgets: layouts.map(layout => {
                return {
                    ...state.widgets.find(widget => widget.id === layout.i),
                    layout: {
                        x: layout.x,
                        y: layout.y,
                        w: layout.w,
                        h: layout.h
                    }
                }
            })
        }
    });
}

render() {
    const { widgets, edit } = this.state;

    const layouts = {
        'md': widgets.map(widget => {
            return {
                i: widget.id,
                ...widget.layout
            }
        })
    };

    return (
            <ResponsiveGridLayout
                layouts={layouts}
                onLayoutChange={this.handleLayoutChange}
                isDraggable={edit}
                isResizable={edit}
            >
                {widgets.map(widget =>
                    <div key={widget.id}>
                        ...
                    </div>
                )}
            </ResponsiveGridLayout>
    )
}

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days