React-data-grid: Getting warnings with react 15.5+

[jrgleason]

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[ ] v0.14.x

Community Supported:
[X] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[X] IE 9 / IE 10 / IE 11
[X] Edge
[X] Chrome

Should work:
[X] Firefox
[X] Safari

---

I'm submitting a ... (check one with "x")

[X] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior

When you try to run with React 15.5.X you get the following warnings...

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
warning.js:36 Warning: Draggable: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Expected/desired behavior

No warnings

Reproduction of the problem

Just use the right version of React

What is the motivation / use case for changing the behavior?

React upgrage

Both stack traces show it coming from RDG, I double checked and didn't see any open issues.

[dzwiedziu-nkg]

Confirm, I get following warings on React v15.5.4:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

and

Warning: Draggable: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

[dan-kez]

I am also receiving the above errors.

I am also having issues where the rowGetter method is being called with a different state than I would otherwise expect. See code below:

const ReactDataGrid = require('react-data-grid');
import React, { Component } from 'react';
import { connect } from 'react-redux';

@connect(
  state => ({
    rows: state.rows
  })
)
export default class Test extends Component {

  constructor(props) {
    super(props);

    this._columns = [
      {
        key: 'id',
        name: 'ID',
        width: 80
      },
      {
        key: 'task',
        name: 'Title',
        editable: true
      },
      {
        key: 'priority',
        name: 'Priority',
        editable: true
      },
      {
        key: 'issueType',
        name: 'Issue Type',
        editable: true
      },
      {
        key: 'complete',
        name: '% Complete',
        editable: true
      },
      {
        key: 'startDate',
        name: 'Start Date',
        editable: true
      },
      {
        key: 'completeDate',
        name: 'Expected Complete',
        editable: true
      }
    ];

    this.state = { rows: this.createRows(1001) };
    console.log(this.state);
  }

  getRandomDate(start, end) {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
  }

  createRows(numberOfRows) {
    let rows = [];
    for (let i = 1; i < numberOfRows; i++) {
      rows.push({
        id: i,
        task: 'Task ' + i,
        complete: Math.min(100, Math.round(Math.random() * 110)),
        priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)],
        issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)],
        startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()),
        completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1))
      });
    }
    return rows;
  }

  rowGetter(i) {
    return this.state.rows[i];
  }

  handleGridRowsUpdated({ fromRow, toRow, updated }) {
    let rows = this.state.rows.slice();

    for (let i = fromRow; i <= toRow; i++) {
      let rowToUpdate = rows[i];
      let updatedRow = React.addons.update(rowToUpdate, {$merge: updated});
      rows[i] = updatedRow;
    }

    this.setState({ rows });
  }

  render() {
    console.log(this.state);
    // return (<h1>{this.rowGetter(1).id}</h1>);
   // I Get a type error on rowGetter with the following return but not the previous.
    return  (
      <ReactDataGrid
        enableCellSelect={true}
        columns={this._columns}
        rowGetter={this.rowGetter}
        rowsCount={this.state.rows.length}
        minHeight={500}
        onGridRowsUpdated={this.handleGridRowsUpdated} />);
  }
};

[CrazyBS]

I get the same React warnings. It may force me to use a different grid since adding deprecated code into a new project is bad form.

[m0onspell]

Same for me. I searched for an alternatives to this pakage, but couldn't find anything suitable.
I am doing a test task for a company. How should I explain them those warnings?

[GlebDolzhikov]

please help me somebody to finish that issue...)

[ryancogswell]

I took a brief look at trying to fix this, but it requires changes to a very large number of files, so I think this should be handled by one of the core maintainers of this code. Otherwise the code review process would be just as time consuming as making the changes.

[iGitScor]

Do you have more information about this issue? Is it a WIP ?

[jpdriver]

Hi all,

Appreciate the warnings you see at the moment are annoying, but is this actually breaking anything?

I might be able to jump in here if absolutely necessary (as I agree with @ryancogswell that any React update should probably come from a core maintainer), but at the moment it feels like addressing this would be a high cost for relatively little benefit?

For what it's worth I'm currently spending all my time on the next major Grid version which should be fully compatible (and no warnings) with both React 15 and 16 out of the box.

[iGitScor]

Hi @jpdriver,

Maybe you should add this as a note in the documentation to avoid complaint about warnings and potentially to help you to develop the next major version. Because the most frustrating thing in those packages is when the package has a good quality but seems unmaintained (typically issues should be closed if they won't be treated 😉 ). And it's not the case.

Are you looking for contributors for the new release?

[ryancogswell]

@jpdriver Do you have an approximate timeline for when the next major grid version would be released? I believe React 16 is expected to be released later this summer. If you expect to release the next major grid version in the next month, then these warnings aren't a big issue. If it will likely be longer than that, then this issue will potentially prevent us from being able to upgrade to React 16 when it is released. Even if the next major grid version is released before React 16, this issue makes it difficult to confidently prepare our code base for React 16. Since these warnings only occur once (not for each offending occurrence), so long as we are getting a warning from react-data-grid it makes it difficult to confidently determine whether or not we have any other external packages that may also have this issue.

[lord-xeon]

Another important factor is backwards compatibility between the next grid version, and the current version. Any idea what we can expect there?

[jpdriver]

@ryancogswell Unfortunately no, I don't have an approximate timeline and won't be able to provide one. Whatever updates get made to the Grid (whether they're compatibility updates or major version changes) they won't ship until they're ready.

When it comes to updating React (especially with major versions like React 16), one of the biggest considerations is what version the wider Adazzle product suite depends on. I'm sorry to say it, but it's likely this will always take priority over the community requirements -- and will predominantly determine which version the Grid uses.

That said, I am sensitive to the fact that everyone has different update cadences, and some people might want to adopt the latest React version as soon as possible. Hence why I've been pushing for a fully-compatible version for forward-leaning users who are on the latest 15.x.x release or beyond.

Like I said in my comment earlier I understand the warnings are annoying, and I take the point they're impacting forward-planning for people wanting to track the stable React version, but at this point in time -- as things are right now, today -- the cost / benefit just feels off for me; especially when doing this will absolutely detract development time away from the new features (which already include fully addressing this).

I hope that's at least clear, if not the exact answer you wanted!

[jpdriver]

@lord-xeon let's keep things on topic of React 15 Warnings here -- but since you asked things are being kept almost identical in terms of the API surface. Under the hood there have been significant changes; including to the version of React we depend on.

    "react": "^15.6.1 || ^16.0.0-alpha.12",

[lord-xeon]

@jpdriver I don't mean to derail the conversation here. I asked because I have a sizable codebase that's in progress/built and it is reliant on the react-data-grid. I agree that the warnings don't bother me for the most part, so long as they will be addressed somehow.

However, if the way they are addressed is by upgrading to react-data-grid v3, then I would expect, and hope that much of the react-data-grid API stays the same.

• Column Structure
• Selection
• DnD
• Editability

If however there are major breaking changes that one would expected in a semantic version release, then I, and others like me will unfortunately be stuck on react-data-grid v2.0.x, and as an extension, quite probably react v15.x.x

[jpdriver]

Hi all,

After due consideration, the delays to v3, and the imminent release of React 16 (later today) -- I think we should now consider an interim v2 release that has full compatibility with 15.5+.

I'll update below with a link to the PR once it's open.

[elmarsto]

That would be good -- just lost an hour trying to figure this out on React 16. Yes, I know, the docs are clear as to what versions are supported, but still. There was a lot of Surprise. :) I'm only (mildly) frustrated because react-data-grid is so awesome and I depend on it so utterly for the app I'm building. :) Keep up the good work!

[DanHarman]

Is it just warnings with react 16 or is it non-functional at this point? The grid looks amazing, but I'd like to know if I should hold off porting from ant-table which we have for now.

[stevewillard]

@DanHarman It's non-functional with React 16. Specifically, React.PropTypes is not a thing anymore, so it'll crash on that.

[wKovacs64]

@DanHarman You can throw in a little 3-4 line hack to get it to work if it's the only thing holding you back. This is what I did:

// temporaryHackForReactDataGrid.js: import this file before react-data-grid

const PropTypes = require('prop-types');
// next line is only required until ron-react-autocomplete is rebuilt and republished
PropTypes.component = PropTypes.element;
require('react').PropTypes = PropTypes;
require('react').createClass = require('create-react-class');

[dijonkitchen]

The official Facebook codemod might make this fast and easy: https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types

[mikol-styra]

Basic example fails to render with React 16.0.0. I assume that this is because PropTypes is no longer a member of the React module:

TypeError: Cannot read property 'number' of undefined
(anonymous function)
src/wip/styra/react-data-grid/react-data-grid-poc/node_modules/react-data-grid/dist/react-data-grid.js:7122
  7119 | };
  7120 | 
  7121 | SimpleRowsContainer.propTypes = {
> 7122 |   width: _react.PropTypes.number,
  7123 |   rows: _react.PropTypes.array
  7124 | };
  7125 | 

[DanHarman]

Yeah I just hit the same problem trying to use @wKovacs64 hack.

[wKovacs64]

I'm using React 16 and [email protected] in production with that hack. How are you running the example, exactly (what are the reproduction steps)?

[mikol-styra]

The hack works for me with a create-react-app-created project. I had to implement it as a separate module – otherwise I get a “Import in body of module; reorder to top import/first” error and the app won’t compile.

// Only need to do this once.
import './fix-create-class'
import './fix-prop-types'

/** fix-create-class.js */
import createClass from 'create-react-class'
import React from 'react'

export default (React.createClass = createClass)

/** fix-prop-types.js */
import PropTypes from 'prop-types'
import React from 'react'

export default (React.PropTypes = PropTypes)

[kwkau]

had the same issue with the prop-types package but i had to use a different approach to attach the PropTypes property to React since i was working with TypeScript
hope this helps someone

import * as PropTypes from "prop-types";
import * as React from "react";

Object.defineProperty(React,
"PropTypes",
{
enumerable: false,
configurable: false,
writable: false,
value: PropTypes
});

[OmerAli]

Hi facing the same issue with react 16.1.0 any hack or help would be appreciated Thanks Peace.

[amanmahajan7]

@OmerAli which version of RDG are you using? This warning has been fixed in V3

[OmerAli]

sorry for late reply @amanmahajan7 using react-data-grid": "^3.0.11"

[amanmahajan7]

This should no longer be an issue, can you create a codesandbox example if you still have this issue?