GridItem throwing error in react about react-grid-dnd HOT 4 OPEN

can you share the code that you're using to render the grid?

it sorta looks like it might be a react-spring issue, too, perhaps related to a new beta release. But I could learn more from looking at your render code first.

from react-grid-dnd.

  render() {
 
    return (
      <GridContextProvider onChange={onChange}>
            <GridDropZone
              id="items"
              boxesPerRow={4}
              rowHeight={100}
              style={{ height: "400px" }}
            >
              <GridItem key={0}>
                <div
                  style={{
                    width: "100%",
                    height: "100%"
                  }}
                >
                  Render your item here
                </div>
              </GridItem>
            </GridDropZone>
          </GridContextProvider>
    );
  }
}

I'm just rendering the basic code in which you gave in the readme. Noticed that once I remove the GridItem component the issue just vanishes.

Also there is warning too..

deprecations.js:8 react-spring: interpolate() will be deprecated in v10, use .to()

Tried downgrading to [email protected] & [email protected]. Issue still exist.

from react-grid-dnd.

Ah, I think the issue might be that GridDropZone expects an array of children. Try plugging my Readme example directly in place of your code. Notice that you are just rendering a single GridItem while I'm mapping through items.

I've also just updated react-spring which might fix some issues.

from react-grid-dnd.

@bmcmahen I tried looping <GridItem> as in readme example, still issue exist. I tried resolving all dependency errors but nothing good happens. Meanwhile I created a fresh react project and tried , it's working fine there. So I hope this is due to some version mismatch between the dependencies.

It would be great if you can try replicate this at your side, using the blow dependency list as base.

Dependencies

"dependencies": {
"@axetroy/react-download": "^1.1.1",
"autoprefixer": "7.1.6",
"babel-core": "^6.26.3",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"bootstrap": "^4.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"create-react-class": "^15.6.3",
"css-loader": "^0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"history": "^4.6.3",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"js-file-download": "^0.4.1",
"konva": "^3.4.1",
"lodash.flow": "^3.5.0",
"moment": "^2.22.2",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "^2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "16.8.6",
"react-avatar-edit": "^0.8.2",
"react-avatar-editor": "^11.0.4",
"react-avatar-image-cropper": "^1.1.7",
"react-beautiful-dnd": "^8.0.7",
"react-bootstrap": "^0.31.5",
"react-bootstrap-date-picker": "^5.1.0",
"react-circular-progressbar": "^0.8.0",
"react-content-loader": "^3.1.2",
"react-cropper": "^1.0.1",
"react-cropperjs": "^1.2.5",
"react-d3-components": "^0.9.1",
"react-datepicker": "^1.5.0",
"react-dev-utils": "^5.0.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dom": "16.8.6",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^4.2.11",
"react-gesture-responder": "^2.1.0",
"react-grid-dnd": "^2.0.0",
"react-image-cropper": "^1.3.0",
"react-image-lightbox": "^5.1.0",
"react-items-carousel": "^2.3.5",
"react-konva": "^16.8.6",
"react-lightbox-component": "^1.2.1",
"react-modal": "^3.4.5",
"react-native": "^0.60.5",
"react-number-format": "^3.5.0",
"react-paginate": "^6.3.0",
"react-pdf": "^3.0.5",
"react-redux": "^5.0.7",
"react-responsive-modal": "^3.0.3",
"react-router": "^4.2.0",
"react-router-dom": "^4.1.2",
"react-slick": "^0.24.0",
"react-sliding-pane": "^2.0.2",
"react-sortable": "^2.0.0",
"react-sortable-hoc": "^0.8.3",
"react-three-fiber": "^2.0.0",
"react-zdog": "^1.0.10",
"reactstrap": "^5.0.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"resolve": "1.6.0",
"style-loader": "^0.19.0",
"superagent": "^3.8.3",
"sw-precache-webpack-plugin": "0.11.4",
"three": "^0.107.0",
"url-loader": "0.6.2",
"webfontloader": "^1.6.28",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3",
"zdog": "^1.1.0"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
}

from react-grid-dnd.