Avoid using array index as key prop

[ascott]

plz review @alvinsng @spikebrehm

[lencioni]

What do you think about phrasing this more generally, in a way that makes it clear what kinds of keys are good to use?

[ljharb]

also, "array indexes" or "array indices"?

[ascott]

yeah good point. what about:

Avoid using an array index as key prop, prefer a unique id.

[ljharb]

s/id/ID and sounds great!

[alvinsng]

Use unique element ids and not array indexes or other counter indexes as React may display elements out of order. See this article for why.

[spikebrehm]

Thanks for this! Content LGTM, but there's some formatting suggestions.

[alvinsng]

Thanks!

[ascott]

fixed the formatting:

[ljharb]

@ascott looks great! any chance you'd mind rebasing down to one commit? :-)

[ascott]

will do @ljharb

[goatslacker]

Can we get a lint rule for this? :)

[ljharb]

There's https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-key.md but I don't know how reliably a lint rule would be that checked for "using the second param to a map callback" or "using something called i or index". Please do file an issue on eslint-plugin-react if you think one could still be written.