TypeError: Cannot read property 'length' of undefined in ReactDataGrid

Question

The code I run with are:

import React from "react"; 
import ReactDataGrid from "react-data-grid";
const styles = {
    fontFamily: "sans-serif",
    textAlign: "center"};

const Example = () => { 
  const columns = [
    { key: "id", name: "ID" },
    { key: "title", name: "Title" },
    { key: "count", name: "Count" }
  ];
  const data = [
    { id: 0, title: "row1", count: 20 },
    { id: 1, title: "row1", count: 40 },
    { id: 2, title: "row1", count: 60 }
  ];
  return (
    <div style={styles}>
      <div>
        <ReactDataGrid
          columns={columns}
          rowGetter={i => data[i]}
          rowsCount={3}
          minHeight={150}
        />
      </div>
    </div>
  );
};
export default Example;

Here is the error message

Even the same example in their official web prompts the same error. So is there any suggestion about it?

The dependencies that are auto installed for the project:

"@emotion/react": "11.0.0",
"@emotion/styled": "11.0.0",
"@inovua/reactdatagrid-enterprise": "^4.0.8",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"jquery": "^3.5.1",
"react": "^17.0.1",
"react-data-grid": "^7.0.0-canary.33",
"react-dom": "^17.0.1",
"react-hover": "^2.0.0",
"react-icons": "^3.11.0",
"react-lightbox-component": "^1.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-scroll": "^1.8.1",
"react-select": "^3.1.0",
"stream-chat": "^2.7.4",
"stream-chat-react": "^3.2.2",
"styled-components": "^5.2.1",
"twin.macro": "^1.0.0-alpha.7",
"typescript": "^4.0.5",
"web-vitals": "^0.2.4"

Any suggestions will be appreciated. Thanks!

Answer 1

try

return (
        <ReactDataGrid rows={rows}
                       columns={columns}/>
    );

Not even a mention of rows prop in documentation, that seems outdated

source : https://github.com/adazzle/react-data-grid/issues/2030