React-data-grid: `ref` is not a prop.
HAVE YOU ALREADY SEARCHED FOR SIMILAR ISSUES? PLEASE HELP US OUT AND DOUBLE-CHECK FIRST!
ALSO, PLEASE DON'T BE THAT PERSON WHO DELETES THIS TEMPLATE. IT'S HERE FOR A REASON.
THANKS!
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:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[ X ] Chrome
Should work:
[ ] Firefox
[ ] 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 rendering the basic example using React 15.4.2, an error is thrown with the following stacktrace:
Warning: Cell: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)
printWarning @ warning.js:36
warning @ warning.js:60
warnAboutAccessingRef @ ReactElement.js:74
checkType @ ReactPropTypes.js:138
checkReactTypeSpec @ checkReactTypeSpec.js:57
validatePropTypes @ ReactElementValidator.js:151
createElement @ ReactElementValidator.js:194
patchedCreateElement @ patch.dev.js:164
getCell @ react-data-grid.js:1504
(anonymous) @ react-data-grid.js:1514
getCells @ react-data-grid.js:1513
Row_render @ react-data-grid.js:1593
(anonymous) @ ReactCompositeComponent.js:796
measureLifeCyclePerf @ ReactCompositeComponent.js:75
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:795
_renderValidatedComponent @ ReactCompositeComponent.js:822
performInitialMount @ ReactCompositeComponent.js:362
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:238
_createInitialChildren @ ReactDOMComponent.js:697
mountComponent @ ReactDOMComponent.js:516
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
mountComponentIntoNode @ ReactMount.js:104
perform @ Transaction.js:140
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:140
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:320
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
renderComponent @ main.js:27
Expected/desired behavior
No error being thrown.
Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem.
- Install react-data-grid.
- Set up the basic example from here.
What is the expected behavior?
No error being thrown.
What is the motivation / use case for changing the behavior?
That no errors are thrown.
michielboekhoff
All 15 comments
Might this have to do with https://github.com/facebook/react/pull/5495? Is this expected behaviour?
michielboekhoff
on 31 Jan 2017
👍
"react": "^15.4.2",
"react-data-grid": "^2.0.4",
moizhb
on 5 Feb 2017
I just checked my yarn.lock (we are using Yarn to lock versions) and it does indeed say we are using 2.0.4:
[email protected]:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-2.0.4.tgz#fd9570c6a06795e97b3e51caa180a4ef6b66e4a0"
michielboekhoff
on 6 Feb 2017
It looks like React deprecated then removed string refs and now only supports callback refs.
https://facebook.github.io/react/docs/refs-and-the-dom.html#legacy-api-string-refs
So it just looks like that each instance of a string ref has to be updated to use a callback ref instead. I can submit a pull request for this if it isn't being worked on already.
DeadHeadRussell
on 7 Feb 2017
@DeadHeadRussell I don't think this is being worked on yet. If you could create a PR that'd be very much appreciated. If you need any help with it, I can contribute code. Just let me know.
michielboekhoff
on 8 Feb 2017
Please go ahead. I got sick yesterday and haven't been able to start it yet.
On Fri, Feb 10, 2017 at 12:27 PM Kelson Adams notifications@github.com
wrote:
@DeadHeadRussell https://github.com/DeadHeadRussell @michielboekhoff
https://github.com/michielboekhoff I need this to be fixed asap so I'm
going to submit a PR. Hope that's ok.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/adazzle/react-data-grid/issues/638#issuecomment-279007714,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAldcxyUKIW6KW1g8qjlH6PAtstweKjzks5rbJ4SgaJpZM4Lyf0N
.
DeadHeadRussell
on 10 Feb 2017
@michielboekhoff : Thanks for looking into this. Was just wondering if you've had a chance to fix it or are you planning to do it soon?
Thanks!
vidhib
on 3 Mar 2017
@vidhib I didn't start working on this since I saw a comment (in my email) that Kelson Adams was working on this, but I don't see the comment here any more. My work is going to be really busy for the next couple of weeks so I won't be able to start on it any time soon.
DeadHeadRussell
on 4 Mar 2017
Ok.. Thanks for letting me know.
vidhib
on 6 Mar 2017
@vidhib I've gotten the green light to start working on this again. I'll pick this up on Monday.
michielboekhoff
on 10 Mar 2017
I've started to pick this up. I've made some progress without breaking the tests, but some bits are slightly more complex and require some refactoring. I'll create a PR probably sometime this week.
michielboekhoff
on 13 Mar 2017
I believe I've fixed most instances right now, over at my fork on the fix-ref branch. I'm still getting some errors about a string being passed into Cell, but I'm not able to locate them at this time. If anyone's interested, they can have a look there. Otherwise, I'll pick this up again tomorrow.
michielboekhoff
on 15 Mar 2017
I've created #700 that should fix this. If anyone finds any string refs that have been left, please comment & I'll fix them.
michielboekhoff
on 16 Mar 2017
hi @michielboekhoff ,
It looks like this caused bug #732 - I think there is an issue in Header.js (https://github.com/adazzle/react-data-grid/blob/master/packages/react-data-grid/src/Header.js) line 110
key={row.ref} means that the HeaderRow's key is now being set to a function
Would you please look into this?
Thanks :)
supamanda
on 1 May 2017
I'll have a look at it when I get back to the office. I'll let you know.
On 30 Apr 2017, at 23:58, supamanda notifications@github.com wrote:
hi @michielboekhoff ,
It looks like this caused bug #732 - I think there is an issue in Header.js (https://github.com/adazzle/react-data-grid/blob/master/packages/react-data-grid/src/Header.js) line 110
key={row.ref} means that the HeaderRow's key is now being set to a function
Would you please look into this?
Thanks :)
―
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
michielboekhoff
on 1 May 2017
Related issues
oliverwatkins
·
4Comments
ganapativs
·
4Comments
ryanwtyler
·
3Comments
daniel1943
·
3Comments
martinnov92
·
3Comments
Most helpful comment
I've started to pick this up. I've made some progress without breaking the tests, but some bits are slightly more complex and require some refactoring. I'll create a PR probably sometime this week.