Failed react-data-grid generation using create-react-app

Question

I am a novice in today's technologies but am planning to use react-data-grid for a pet project.

I am somewhat punch drunk trying to understand git, npm, react, react-data-grid, babel, webpack, javascript and, its variants... So I thought I would try generating my first simple react-data-grid app with create-react-app from Facebook.

I get the following failure during rendering, and I am stuck:

TypeError: undefined is not an object (evaluating 'WEBPACK_IMPORTED_MODULE_0_react["React"].createElement')

My simple app.js below is adapted from the template generated from create-react-app.

import { React, Component } from 'react';
import { ReactDataGrid } from 'react-data-grid';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props, context) {
    super(props, context);
    this._rows = [];
    this._columns = [];
 }

  getRows () {return this._rows;}

  render() {
    return (
          <ReactDataGrid
            columns={this._columns}
            rowGetter={this.getRows}
            rowsCount={this.state.rows.length}
            minHeight={500} />
    );
  }
}

export default App;

I am using:

• react-data-grid 3.0.6
• react 16.2.0
• npm 5.6

Answer 1

Many issues. First the way you import ReactDataGrid must be without brackets. Second, in the instantiation of the component you call for this.state that is not defined, instead you must call to what you have defined: this._rows. Also I had to install the create-react-class package in order to make everything work, probably because it is needed by react-data-grid. The create-react-class package is needed when some package doesn't use ES6.

import React from 'react';
import ReactDataGrid from 'react-data-grid';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this._rows = [];
    this._columns = [];
  }

  getRows () {
      return this._rows;
  }

  render() {
    return (
          <ReactDataGrid
            columns={this._columns}
            rowGetter={this.getRows}
            rowsCount={this._rows.length}
            minHeight={500} />
    );
  }
}

export default App;