Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

When rendering an array, warnAndMonitorForKeyUse produces warning message with undefined #3222

Closed
alexmcmillan opened this issue Feb 21, 2015 · 5 comments · Fixed by #3275
Closed

When rendering an array, warnAndMonitorForKeyUse produces warning message with undefined #3222

alexmcmillan opened this issue Feb 21, 2015 · 5 comments · Fixed by #3275

Comments

@alexmcmillan
Copy link

Just upgraded from v0.10.0 to v0.12.2. Discovered I was rendering an array of child components without providing them with keys. React produced a warning:

Each child in an array should have a unique "key" prop. Check the renderComponent call using <undefined>.

Thought it odd that ReactJS would tell me to go look at "undefined", so I looked into the source... I'm not sure what's going on but

function warnAndMonitorForKeyUse(warningID, message, component, parentType) {
  var ownerName = getCurrentOwnerDisplayName();
  var parentName = parentType.displayName;
  ...
  message += ownerName ?
    (" Check the render method of " + ownerName + ".") :
    (" Check the renderComponent call using <" + parentName + ">.");

Here, parentType is the string "div" so the line var parentName = parentType.displayName; doesn't make sense.

Here's a simple example and the top of the stack I rummaged through to get this far:

warnAndMonitorForKeyUse                                              react-with-addons.js:10056
validateExplicitKey                                                  react-with-addons.js:10158
validateChildKeys                                                    react-with-addons.js:10228
ReactElementValidator.createElement                                  react-with-addons.js:11270
ReactLegacyElementFactory.wrapCreateElement.legacyCreateElement      Section.js:80
React.createClass.render
@browniefed
Copy link

To my knowledge displayName is a thing that is added via a JSXTransformer, If you use a JSX transformer it will take

var SomeParentComp = React.createClass

And give it the display name based on what variable you are assigning it to.
You aren't using one which is why you are getting those issues. Here is your example with JSX set as the javascript parser.
Example: http://jsbin.com/cuzofivuqi/1/edit?js,console,output

@alexmcmillan
Copy link
Author

I am using grunt-react v0.10.0 (which uses react-tools v0.12.0) to transform from JSX - I didn't use JSX in the jsbin for simplicity. As I've just upgraded from ReactJS v0.10.0 to v0.12.2 I also upgraded from grunt-react v0.9.0 to v0.10.0 which uses react-tools v0.12.0 so I'm sure this should work, but I see your identical example using JSX doesn't produce this warning.

However, regardless of any JSX transformer issues, I still believe this is an issue because the official docs state that:

You don't have to use JSX with React.

so there shouldn't be any "side effects" within the react code from my using or not using JSX.

@browniefed
Copy link

@alexmcmillan all it is doing is taking

var cmp = React.createClass({});

to

var cmp = React.createClass({displayName: 'cmp'});

You can just add a displayName key on the object you pass to createClass. If you want you can make a pull request to clear up the documentation.

@alexmcmillan
Copy link
Author

Ok cool - I just thought this hinted at a tighter relationship between ReactJS and JSX than is implied by the documentation, but I guess there's no way react can put anything meaningful there if its missing.

@sophiebits
Copy link
Collaborator

We still shouldn't write "undefined", so this sounds like a bug.

sophiebits added a commit to sophiebits/react that referenced this issue Feb 26, 2015
@sophiebits
Don't use undefined as parent name in key warning
d5fa14d 
Fixes facebook#3222.
@sophiebits sophiebits mentioned this issue Feb 26, 2015
Merged
@zpao zpao closed this as completed in #3275 Mar 2, 2015
zpao added a commit that referenced this issue Mar 2, 2015
@zpao
Merge pull request #3275 from spicyj/gh-3222
4bad1aa 
Don't use undefined as parent name in key warning
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Don't use undefined as parent name in key warning sophiebits/react
3 participants
@sophiebits @alexmcmillan @browniefed