Cannot read property 'type' of null error in no-array-index-key.js

[alaycock]

Version 7.0.1
The full stack trace can be found below.

The issue occurs when I begin to add the key to this code:

      this.state.array.map((arrayItem, index) => (
        <div>
          <button onClick={() => this.delete(index)}>Delete this thing</button>
        </div>
      ))

If I begin to enter the key attribute:

      this.state.array.map((arrayItem, index) => (
        <div key>
          <button onClick={() => this.delete(index)}>Delete this thing</button>
        </div>
      ))

An error in the console is triggered, although I wasn't finished writing the new line.

The issue appears to be on this line, and I suspect it could be corrected altering the line to be if (!value || value.type !== 'JSXExpressionContainer') {, but I'm not sure about the implication of making that change.

[ljharb]

So, setting aside "errors while you're typing", which isn't something that needs supporting, it looks like <div key />inside a .map throws this error?

[alaycock]

Exactly. It looks like the variable which holds the value is null, which throws the TypeError.

[jseminck]

Confirmed by adding a test case:

  1) no-array-index-key invalid foo.map((bar, i) => <Foo key />):
     TypeError: Cannot read property 'type' of null

But... should it be valid, or invalid? According to this specific rule I guess it should be valid, since it's not assigning the index to the key... but then again, just having foo.map((bar, i) => <Foo key />) seems wrong?

[ljharb]

In that case, it's setting the key to true - which is not a use of the index. Separately, it's making the key be the same, which defeats the purpose - but ensuring the key is unique across items is something that React could check at runtime, not something a linter rule could reliably enforce.