Trying to pass "key" to Component while rendering a list not works
Unanswered
Asian black bear posted this in #help-forum
Asian black bearOP
I'm trying to render a list of components so i'm going to pass the "key" prop to these components. However, it throws an error saying that the prop "key" is invalid. The weird thing is that I did it in the past (with Components) and it worked seamlessly. How can I solve this? Did I lost something at React/Next's documentation with the newer updates?
9 Replies
Probably you overrode the
key prop in your type, or the types/react package is outdatedAsian black bearOP
in package.json it's in the latest version. I've ran
yarn just to make sure it's properly installed but the error remains. My Props definition for my compontent is belowThat’s an odd issue, I couldn’t help much in this case
You can check the type definitions of types/react though, maybe you can find some clues about your problem
Asian black bearOP
I will try, thanks
@Asian black bear I'm trying to render a list of components so i'm going to pass the "key" prop to these components. However, it throws an error saying that the prop "key" is invalid. The weird thing is that I did it in the past (with Components) and it worked seamlessly. How can I solve this? Did I lost something at React/Next's documentation with the newer updates?
Wood Thrush
That error is basically saying we don't see
key prop is being accepted in Card component because that's not defined in your Props definition. So you will need to include to the key prop in your Props type and error should go away.No, all JSX components have a key prop by default. You don’t have to specify one
Wood Thrush
I see, will follow this thread to see what was the error and fix about.
Asian black bearOP
Just updating: I couldn't solve the error itself. ended wrapping the cards in a div.