no-array-index-key can be bypassed with toString

[kognise]

You can bypass the no-array-index-key rule with toString().

In other words, this gives an error:

foo.map((bar, index) => (
  <Element key={index} bar={bar} />
))

But this doesn't:

foo.map((bar, index) => (
  <Element key={index.toString()} bar={bar} />
))

[ljharb]

There’s a lot of ways to bypass it; it’s not really practical to try to catch them all. The rule is meant as a helpful warning not to rely on indexes in a key, when your items have a unique signature.

[kognise]

Ok, got it. Should I close this issue?

[ljharb]

I’m not sure. We can certainly detect this specific pattern, but I’m not sure how valuable it’d be, especially considering that x.toString() is an anti pattern (prefer String(x)). What do you think?

[kognise]

Personally, as a naive Reacter, have used index.toString() many times. I am slowly replacing that code with a better approach, but it would've been nice to have been warned.

[ljharb]

@kognise in all javascript, everywhere, including all "native" React (RN or React Web), String(x) is preferred over x.toString(), full stop. That said, String(x) is also not warned on, so that fact is moot.