React-data-grid: Getting getDefaultProps warnings with react 15.6+

[tjhubert]

Which version of React JS are you using?

✅ Officially supported ✅

• [ ] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

• [ ] v15.5.x
• [x] v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

• [ ] v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• [ ] IE 9 / IE 10 / IE 11
• [ ] Edge
• [x] Chrome

⚠️ Not officially supported, but "should work" ⚠️

• [ ] Firefox
• [ ] Safari

---

I'm submitting a ...

• [x] 🐛 Bug Report
• [ ] 💡 Feature Request

👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?
Please do not submit support request here. Instead see

https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

---

Issue Details

current behavior:

Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.

desired behavior: no warnings

motivation: less noise in console warnings and compatibility to upgrade React

[aschonfeld]

Looks like the following files still have references to getDefaultProps:

packages/react-data-grid-addons/src/editors/DateRangeEditor.js
packages/react-data-grid/src/ColumnMetricsMixin.js
packages/react-data-grid/src/Grid.js
packages/react-data-grid/src/Row.js
packages/react-data-grid/src/ViewportScrollMixin.js
packages/react-data-grid/src/Canvas.js
packages/react-data-grid/src/ReactDataGrid.js

But now that I look at the source code you're using createReactClass which means in order to fully convert this to the correct way of defining defaultProps you would have to change how you declare classes as well. Not a tough thing to do, but also not a trivial task.

[kamaldlk]

Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named defaultProps instead,

I'm getting same error please me on this

[jessie20000503]

I also get the same error.

I use the basic example, and in my code :
import Example from './Example'

the grid would display, but i would see lots of "Warning: getDefaultProps..." warings in log

And the Example code:
const ReactDataGrid = require('react-data-grid');
const React = require('react');

export default class Example extends React.Component {
constructor(props, context) {
super(props, context);
this.createRows();
this._columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' } ];

this.state = null;

}

createRows = () => {
let rows = [];
for (let i = 1; i < 1000; i++) {
rows.push({
id: i,
title: 'Title ' + i,
count: i * 1000
});
}

this._rows = rows;

};

rowGetter = (i) => {
return this._rows[i];
};

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

i use the 15.4.2 react ,react-dom, and really don't know how to solve it, could anyone help me? Thanks a lot!

[jessie20000503]

I saw aschonfeld's comment, do that mean react-data-grid need an upgrade to remove these es5 code to es6? Or is there something wrong with the code we use it?

[aschonfeld]

Either they need to update hiw they declare getDefaultProps or you’ll need to downgrade the version of React you use in order to make these dissapear.

[wKovacs64]

~#970 was merged without updating these.~ Using createReactClass is the new/current way of defining class components in ES5 (no need to update to ES2015/ES6 if they don't want to) ~but getDefaultProps needs updated along with it. Looks like the codemod hit some of them, but the remaining occurrences may need manual intervention.~ (see comment below)

[jessie20000503]

Thanks @aschonfeld @wKovacs64 ! I feel so strange , the example code has been in ES6 format , it seems that i have to give up using this component.

[utrolig]

Any timeframe on when this will be fixed? I'm using version 2.0.66 and this isn't working with React 16.

[alienintheheights]

Doesn't look like this code is being supported any longer. Last release 10 months ago and breaking with current React. Need to find another solution.

[wKovacs64]

@jessie20000503 @alienintheheights I'll admit, the way this project is managed is mildly infuriating compared to most OSS, but it is definitely still being worked on. Ignore the releases tab on GitHub - that's based on git tags and apparently they haven't tagged anything since 2.0.2, but 2.0.69 was released just yesterday (2017-10-27).

If you want to use React 16 before this project officially supports it (without the warning spam introduced in 2.0.61 due to #970), use version 2.0.60 with the little hack I mentioned in #744. There are a couple follow-up comments below it for create-react-app and TypeScript as well.

[alienintheheights]

Good to know it's still active because I haven't found anything better. I'm not on React 16 though. Getting these errors with 15.6.1.

[wKovacs64]

In that case, you can still use 2.0.60 but skip the hack. You'll get a couple deprecation warnings, but not the slew of warnings shown above.

[amanmahajan7]

Defining getDefaultProps() as a function is the correct way of using it with createReactClass
https://reactjs.org/docs/react-without-es6.html#declaring-default-props

The problem seems to occur when development and production versions of react and create-react-class are mixed.

To fix the false positive warnings, you need to either use:

• react.js and create-react-class.js (development)
• react.min.js and create-react-class.min.js (production)

https://github.com/facebook/react/issues/9999#issuecomment-310035475

[amanmahajan7]

It is probably a good idea to revisit react-data-grid bundling and decide whether create-react-class should be included in the bundle or specified as a _peer_ dependency

[wKovacs64]

Interesting. Good catch, @amanmahajan7!

[kamaldlk]

[kamaldlk]

please check below url

https://codesandbox.io/s/3z3lq9zn1

Thanks
Kamal

[pidupuis]

Same problem here, need fix

[activebiz]

I am getting same issue here. It will need to be fixed. Do we know any timeline?

[josh08h]

Same warnings with React Fiber.

Although you say React Fiber is "Not officially supported, expect warnings and errors" so it is expected I guess.

[dklanac]

I confirm that setting the package version to 2.0.60 exactly (no ^ mark) eliminates this problem on React 15.6.2.

Thanks for such an awesome project. This is still the most flexible data grid that I've come across.

[kamaldlk]

Hi all any update on this :( , im planning to use my product pls help me to fix this

[kamaldlk]

this 2 files didn't add - ( create-react-class) pls check @amanmahajan7
ColumnMetricsMixin.js
ViewportScrollMixin.js

[dijonkitchen]

@dklanac is 2.0.60 stable? The latest release or tag on Github is 2.0.2.

[gymneganesh]

Getting the same error as well and I am using
"react-data-grid": "^2.0.73",
"react-data-grid-addons": "^2.0.73",

[dklanac]

@dijonkitchen I just followed what @ wKovacs64 mentioned in his earlier post. I didn't check the version history in this project, but it works. I don't see any glaring issues with 2.0.60 vs. 2.0.73 at the moment.

[elderapo]

Temp workaround:

export const disableGetDefaultPropsWarning = () => {
    const warning = "Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.";
    const consoleError = console.error.bind(console);

    console.error = (...args) => {
        if (args[0] === warning) return;
        return consoleError(...args);
    };
};

Just call this function before importing "react-data-grid".

[amanmahajan7]

1012 does not work as expected, reverted changes and reopening this issue

[jpdriver]

IMO I think we should revert #954 (move to prop-types) and #970 (move to create-react-class). The reality is that we were not -- and are not -- ready to adopt ES6 syntax or modern React architecture.

This will be the case as long as we're still using Mixins; which were considered as a powerful pattern circa React 11 (when this lib dates from) but are now strongly discouraged.

They are the ultimate root cause of the PropTypes validation errors introduced with #954 and the warnings about using defaultProps in a Mixin-based architecture in #970.

As far as support for React 15.5+ / 16 goes, I suggest we ship the import shim @wKovacs64 mentioned here https://github.com/adazzle/react-data-grid/issues/744#issuecomment-333890937. This will address all the warnings in a stable and production-friendly manner, whilst also enabling the Grid to be used immediately with React 16.

Officially shipping that would allow us time to clean up the architecture internally without it affecting either external users or Adazzle internally.

@amanmahajan7 @malonecj

[BenLDouthwaite]

@amanmahajan7 Could you confirm why #1012 did not work as intended? it appeared to work correctly on one of my projects

[amanmahajan7]

@BenLDouthwaite #1012 broke the example site, it also works as intended on the local environment. I will revisit this PR

[amanmahajan7]

@jpdriver @malonecj I think instead of reverting #954 (move to prop-types) and #970 (move to create-react-class), it would be better to replace createReactClass with React.createClass. This will generate a single development time deprecation warning (_Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement_). React.createClass warnings are logged when createClass method is called unlike defaultProps warnings which are logged every time an element is created on cloned. Also, there are a few components that can be manually converted to class components without too much work.

Another workaround is to import the development version of create-react-class which would increase the bundle size const createReactClass = require('create-react-class/create-react-class');

A better solution would be to specify create-react-class (breaking change) as a _peer_ dependency or remove mixins and createClass completely (requires decent work)

[arkanmgerges]

Hi,
I have the same problem, I'm using "react": "15.6.2", I'm receiving "Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named defaultProps instead."

I look at the code, and it needs to be refactored, also my opinion to get rid of mixins and use other solutions like utility objects, component compositions, high-order components ...etc, these are found by the article written by Dan Abramov, from the official react js website blog Mixins Considered Harmful, written by Dan Abramov,
He is working on reactjs. Co-author of Redux and Create React App.

The way to write reactjs class in ES6 does not support mixins, and defaultProps is defined as a property not as a function, but with createReactClass() is defined as a function, Declaring Default Props

Thanks

[kaiyoma]

This is my highest priority issue with react-data-grid, so I would also like to see this fixed soon. When I interact with the table, I get literally thousands of errors in the console, which makes debugging other issues unnecessarily difficult.

[PredokMiF]

@kaiyoma, I hope, that out communiti will fix it soon, but now you can set filter in Chrome devtool console, like this:
/^((?!getDefaultProps)[\s\S])*$/

[barbalex]

this issue prevented me from using this library

[mdarif]

+1, we also have been facing the same issue.

[utajum]

+1 same problem here

[29er]

we decided not to use this grid as we are on React16 , and too many issues. bah humbug

[kaiyoma]

Same here. Too many issues and not enough documentation.

[Waize]

@29er and @kaiyoma did you found any decent library for large tables? What are you using now?

[kaiyoma]

I switched to react-virtualized and it's been working out really well so far.

[29er]

we are now using https://github.com/agracio/ts-react-json-table . it's been doing the job fine for our needs.

[stevewillard]

If you're looking for a canvas based solution, and need a high performant data grid which can handle thousands of rows and columns, I highly recommend https://github.com/TonyGermaneri/canvas-datagrid

There are very few canvas solutions out there, and I found this one to be great. The documentation is quite good, too.

[mgcdanny]

After hitting this issue, I searched around and am trying this: https://devexpress.github.io/devextreme-reactive/react/grid/

[DamienNsh]

Any information about the fix ?

All your projects are good but they don't help me.
I search a grid where it is possible to edit one cell and disable the editing on a column.
It must also have filters for the column and it can.

PS: are you coding a version that works with react 16?

(happy new year)

[mmabraham]

I used this hack to suppress the error in test files:

const _error = window.console.error;
const warningToSuppress = 'Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.';
export const suppressError = () => {
    window.console.error = (errorText) => {
        if (errorText && errorText.indexOf(warningToSuppress) >= 0) {
            return null;
        } else {
            _error(errorText);
        }
    }
}

Still hoping that this issue will be fixed though as it is blocking us from upgrading to React 16.

[amanmahajan7]

@mmabraham, this issue has been fixed. Please upgrade to v3
https://github.com/adazzle/react-data-grid/blob/master/migrations/v2-v3.md

[yoDon]

@mmabraham I believe v3 only fixes the React 15.5+ incompatibility for react-data-grid, not for react-data-grid-addons.

react-data-grid v3.0.11 is working fine with React 15.6 but anything I try to pull in from react-data-grid-addons throws the PropTypes and createClass exceptions. @wKovacs64's 3-4 line hack seems to still be required to get the v3.0.11 react-data-grid-addons to work.

[amanmahajan7]

@yoDon v3 does not officially support React 15.5.x and React 16.x and it is possible that some of the dependencies of react-data-grid-addons are still using React.createClass and React.PropTypes. Apart from the deprecation warnings, v3 should work with React 15.x.x.

We are actively working on v4 that will remove all the deprecation warnings and will be fully compatible with React 15 and React 16.

[oliverwatkins]

Updated to : [email protected]

I no longer see these errors

Can you please update your Github releases? The latest release says 2.X something

[vdsheryarshirazi]

Is there anyway to get this error in eslint/babel-eslint?