Using custom component with react-layout-grid

Question

I am using https://github.com/strml/react-grid-layout to create a layout of items which I can resize and move. The problem I'm having has been raised in multiple issues (below) against the repo with little assistance.

Here is the bit of code that works fine.

<ResponsiveGridLayout
    layouts={this.state.layouts}
    autoSize={autosize}
    breakpoints={breakpoints}
    onLayoutChange={(layout, newLayout) =>
        this.onLayoutChange(layout, newLayout)}>
    <div key="1">...</div>
    <div key="2">...</div>
    <div key="3">...</div>
</ResponsiveGridLayout>

I would like the ability to nest a custom component within <ResponsiveGridLayout> like so. Where <CustomComponent /> contains other boxes that can interact.

<ResponsiveGridLayout
    layouts={this.state.layouts}
    autoSize={autosize}
    breakpoints={breakpoints}
    onLayoutChange={(layout, newLayout) =>
        this.onLayoutChange(layout, newLayout)}>
    <div key="1">...</div>
    <CustomComponent />
</ResponsiveGridLayout>

Here is a basic reproduction of the problem I'm having.

https://stackblitz.com/edit/react-rncnqr

Thanks in advance!

score 0 · Answer 1 · answered Aug 27 '23 at 05:55

You should add key props to CustomComponent

<ResponsiveGridLayout
    layouts={this.state.layouts}
    autoSize={autosize}
    breakpoints={breakpoints}
    onLayoutChange={(layout, newLayout) =>
        this.onLayoutChange(layout, newLayout)}>
    <div key="1">...</div>
    <CustomComponent key="2" />
</ResponsiveGridLayout>

Using custom component with react-layout-grid

1 Answers1