react-grid-layout: onLayoutChange never called

hi, in all of the example, we use something like

<ReactGridLayout onLayoutChange={this.onLayoutChange}
          {...this.props}>
</ReactGridLayout>

but we expect i the component’s onLayoutChange, that this.props.onLayoutChange is defined by the parent element. and so, we the callback override the component’s callback that tries to do a setState and is never called. is it intended ?

in the mean time, if i put the order like this

<ReactGridLayout {...this.props} onLayoutChange={this.onLayoutChange}>
</ReactGridLayout>

i got an infinite loop…

am i missing something?

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 19 (4 by maintainers)

Commits related to this issue

Fix cwrp children comparison typo; see #169 — committed to react-grid-layout/react-grid-layout by STRML 8 years ago

Most upvoted comments

I run into the same issue but when I changed: onLayoutChange(layout) { this.setState({layout: layout}); }, to onLayoutChange(layout) { setTimeout(() => { this.setState({layout: layout}) }); }, the problem of infinite loop was gone. For sure it’s not a correct solution but let me to move on

Update: the problem still exists but at least grid doesn’t hang

Update2: I solved the problem simply by comparing previous and the new layout before updating the state:

layoutChange = (layout) => {
        if (!_.isEqual(this.state.layout, layout)) {
            this.setState({
                layout: layout
            });
        }
    };

unodgs on Feb 29, 2016