Unique keys in React
Anyone know why I'm getting that warning here? I've a key for each
renderedItem
returned, and for the nested ItemComponent
so am a bit confused. Haven't spent enough time banging my head against a React wall to spot it, and out of the 17 pages of errors React has provided me with none are helpful.
Would appreciate it if someone can spot the error I can't!
9 Replies
I am new to react so please forgive me if I am missing the issue.
Presumably item.id is numeric.
What values does options have? If there is a chance that the option value might be numeric that could cause the error.
It might be the completely wrong approach but for keys I tend to prepend a string to the keys to reflect what type of data it is and specifically to avoid the possibility of having duplicate keys.
eg item-${item.I’d} and option-${option}
eg item-${item.I’d} and option-${option}
key={option}
it looks like option
is not a valid key type. If you're passing an object when it does key comparisons it sees all keys as [object Object]
making it non-unique
The error you get should mention this. You want to use something that when converted to a string is unique@Chris yeah item.id is just a numeric id. The options object is an array of string options
@zed_dash item.content.options is just an array of strings representing the options - not a great key, but should be unique? Or does that not count?
Think I might just add an id to see if that fixes it
Ah if
option
is a string then what I've mentioned isn't the issue, as long as the array contains unique items
(It looked like option
is an object because you're only passing option={option}
to the component which suggests that more than a string is contained)If options is an object (or an array)then the issue is what @zed_dash has said
Regardless using TypeScript would help make things clear
Ah, thanks guys, it ended up me being an idiot. That .id class didn't exist on the item.
Know it was my fault, but still no idea why React doesnt attach the key to the dom so that obvious errors can be more obvious :/
Classic error
React doesn't because it's unnecessary if you develop using TypeScript, that's the kind of error that isn't possible with it
Yeah, have done a big course on TS recently, am a fan (esp coming from Java). Just have to apply it all to React then Express (which I've heard is a ballache), and then I'll be job ready )
🙂