React - Problem with ReactDataGrid (Cannot read property 'length' of undefined)

Question

I am new to react. Just started learning yesterday. I want to implement data grid in the react app so decided to user ReactDataGrid component. I install the componenet using command npm install react-data-grid --save. This is how I have implement the code in my page.

import { Component } from 'react';
import ReactDataGrid from 'react-data-grid';

class Employee extends Component {
    constructor(pros) {
        super(pros);
        this.state = {
            columns: [
                { key: 'id', name: 'ID' },
                { key: 'title', name: 'Title' },
                { key: 'count', name: 'Count' }
            ],
            rows: [
                { id: 0, title: 'row1', count: 20 },
                { id: 1, title: 'row1', count: 40 },
                { id: 2, title: 'row1', count: 60 }
            ]
        }
    }

    render() {
        return (
            <div className="row">
                <div className="col-md-12 col-sm-12 col-lg-12 card card-user">
                    <div className="row card-header">
                        <div className="col-md-8">
                            <h5 className="card-title">Employee List</h5>
                        </div>
                        <div className="col-md-4 text-right">
                            <button className="btn btn-primary btn-round"><i className="nc-icon nc-simple-add"></i> &nbsp; Add</button>
                            <button className="btn btn-danger btn-round"><i className="nc-icon nc-simple-remove"></i> &nbsp;Cancel</button>
                        </div>
                    </div>
                    <div className="card-body">
                        <ReactDataGrid
                            columns={this.state.columns}
                            rowGetter={i => this.state.rows[i]}
                            rowsCount={3}
                            minHeight={150}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

export default Employee;

But unfortunately, I got some problem there. And the error state as below image.

How do I get rid of this problem?????

Answer 1

Your implementation is correct. Application is crashing because of the latest version. Try with ReactDataGrid v6.1.0.

I have created a sample codesandbox. You can verify the behaviour there. Try to change the version of the react-grid and see the result. (highlighted with red in the screenshot)

Working code - https://codesandbox.io/s/sleepy-thunder-yee6j?file=/src/App.js