React: Wrong warning message is shown

[kambleaa007]

Do you want to request a feature or report a bug?
BUG
What is the current behavior?
Wrong warning message is shown

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

github file: github file

sandbox: sandbox

write simple functional componenet, put return method NOT render,
warning tells its render,
actually its not render, its return method

What is the expected behavior?
Should tell, its return method of something.....

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"name": "confusion",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "4.0.0",
"bootstrap-social": "5.1.1",
"cross-fetch": "2.1.0",
"font-awesome": "4.7.0",
"gh-pages": "^2.0.1",
"mdbreact": "^4.18.0",
"prop-types": "15.6.0",
"react": "^16.4.0",
"react-animation-components": "3.0.0",
"react-dom": "^16.4.0",
"react-popper": "0.9.2",
"react-redux": "5.0.7",
"react-redux-form": "1.16.8",
"react-router-dom": "4.2.2",
"react-scripts": "1.1.4",
"react-transition-group": "2.3.0",
"reactstrap": "5.0.0",
"redux": "3.7.2",
"redux-logger": "3.0.6",
"redux-thunk": "2.2.0"

[illuminist]

IMO, I like to think that the entire functional component itself is a render method of class component which make the both component type more understandable for me.

And by the way, return isn't a method in any sense. As you can see the warning you got actually came from when you created commentList before you actually return it in root of the function.

Lastly bonus point for your code, you need a key prop in Fade component.

[kambleaa007]

The warning, It tells me that,
render method of RenderComments (Completely Wrong Misleading Message),
and
@illuminist i have put key in <li key={}> tag,
should i put it inside <Fade key={}>
Is there anything wrong while creating commentList,
I need to assign same code for each comment coming from commentList

[sidverma32]

have you tried this at bottom of your code:
ReactDOM.render(<RenderComments />, document.getElementById("root"));
and add <Fade in key={key}>

[kambleaa007]

@sidverma32 i cant write such complex syntax,
@illuminist i am working on project,

my code is at here

[threepointone]

Yeah this seems like something we could do better. We could tweak the messaging based on the type of the component.

[illuminist]

@kambleaa007 key prop should be in the first level element inside an array which is Fade. While your li has key, it's on second level from root inside array so it has no effect at all.

[kambleaa007]

I searched the react code, i cant find warning message like array or iterator in whole source code,
i think its in, ReactElementJSX-test.internal.js,

[illuminist]

@kambleaa007 You code use [email protected] which is already outdated for long time ago.

[kambleaa007]

@illuminist Thanks, I made upgrade i package.json, Now its [email protected] installed, Some changes breached but nothing major impact, fixes in no time

[marcosmss]

@kambleaa007 As colleagues have commented, the 'key={}' property must always be in the first map element.

[threepointone]

The point here, I think, is not that the code is buggy (which it is), but that the message shouldn’t use “render method” when referring to function components.

[bvaughn]

I think the confusion is in the wording. This issue says the "wrong warning message" in a few places when it's not wrong. The warning itself (key is required) is _accurate_. It's just a bit _confusing_ because of the wording.

[riez]

I think it's not wrong warning message. In this case you should be able to fix the warning message by adding the key on the first element-tag.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[kambleaa007]

I think it's not wrong warning message. In this case you should be able to fix the warning message by adding the key on the first element-tag.

I have function RenderComments(){return...}, warning says render method of RenderComments (which is not), I dont even have render method anywhere (functional component do they Have render or return?), then why warning says so, is my point

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any additional information, please include with in your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!