React-grid-layout: item is missing when div is returned by react component

[lasso-codie]

• [X] Bug
• [ ] Feature Request
• [ ] Question

Hey,
I today encountered a very strange effect. I've got a react component with a rendering method:

class Home extends React.Component {

render() {

    return (
      <GridLayout className="layout"
        cols={max_cols}
        rowHeight={max_rows}
        width={window_width}
        draggableCancel="input,textarea">

        <div style={{
          backgroundColor: ui_colors["blue"][3],
          display: 'flex',
          flexDirection: 'column',
          borderTopLeftRadius: '20px',
        }}
          key="example"
          data-grid={{
            x: 1,
            y: 0,
            w: 8,
            h: 25,
          }}/>

      </GridLayout>
    )
}

}

Once I moved the div into another react component, it is not rendered anymore. Indeed it is not even present in the DOM and there is no error message.

class ExamplePanel extends React.Component {

    render() {
        return (
            <div style={{
                backgroundColor: ui_colors["blue"][3],
                display: 'flex',
                flexDirection: 'column',
                borderTopLeftRadius: '20px',
            }}
                key="example"
                data-grid={{
                    x: 1,
                    y: 0,
                    w: 8,
                    h: 25,
                }}/>

        )
    }

}

class Home extends React.Component {
render() {

    return (
      <GridLayout className="layout"
        cols={max_cols}
        rowHeight={max_rows}
        width={window_width}
        draggableCancel="input,textarea">

        <ExamplePanel />

      </GridLayout>
    )
}
}

It's literally the same code so why is it missing? Can't think of a single thing.

[neove]

i have the same problem with you , any good ideas ?

[lasso-codie]

not yet ...

[nicosampler]

I'm having the same Issue, I noticed that if a div is used, it receive as props.children an array with 2 elements (re-sizable and draggable) , but when you use a custom element, the first is undefined, and seems to be the one related with rendering the re-sizable item.

[senro]

same Issue, and if i set a component in div ,the component will be wraped in a blank div, the inner component can not resize with its parent.

[anze555]

Same here, took me a while to find the reason. :+1:

[hellosylvee]

I'm running into this issue, has this been resolved anywhere?

[attiqeurrehman]

Grid Item needs some important style that needs to be passed. Please check these out 293 and 299

[Cherviakov]

This is really super bad design. Obviously people would like to divide view to custom components rather than write whole grid under one component.

[liran87]

Has this been resolved?

[CWSites]

@STRML a lot of eyes on this one, any ideas on how we can fix this? I've reproduced it here for troubleshooting: https://stackblitz.com/edit/react-rncnqr

[STRML]

@CWSites See https://github.com/STRML/react-grid-layout/issues/299#issuecomment-328398196. You are not passing className and style.

[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