💅 useJsxKeyInIterable: Not working when component starts on the next line

[kevinwolfcr]

Environment information

CLI:
  Version:                      1.6.0
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v20.10.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "bun/1.0.30"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 false

Linter:
  Recommended:                  false
  All:                          true
  Rules:                        nursery/all = true
                                nursery/useSortedClasses = {"level":"error","options":{"attributes":["class","className","className","classList"],"functions":["clsx","cva","tw","cn"]}}
                                style/all = true
                                style/noImplicitBoolean = "off"
                                style/useBlockStatements = "off"
                                style/useNamingConvention = "off"

Workspace:
  Open Documents:               0

Rule name

useJsxKeyInIterable

Playground link

https://biomejs.dev/playground/?lintRules=all&code=YwBvAG4AcwB0ACAAZgByAHUAaQB0AHMAIAA9ACAAWwAiAEEAcABwAGwAZQAiACwAIAAiAEIAYQBuAGEAbgBhACIALAAgACIATwByAGEAbgBnAGUAIgBdADsACgAKAGUAeABwAG8AcgB0ACAAZgB1AG4AYwB0AGkAbwBuACAARgBvAG8AZAAoACkAIAB7AAoAIAAgAHIAZQB0AHUAcgBuACAAKAAKACAAIAAgACAAPABkAGkAdgA%2BAAoAIAAgACAAIAAgACAAPABoADEAPgBGAG8AbwBkADwALwBoADEAPgAKACAAIAAgACAAIAAgADwAdQBsAD4ACgAgACAAIAAgACAAIAAgACAAewBmAHIAdQBpAHQAcwAuAG0AYQBwACgAKABmAHIAdQBpAHQAKQAgAD0APgAgACgACgAgACAAIAAgACAAIAAgACAAIAAgADwAbABpACAAawBlAHkAPQB7AGYAcgB1AGkAdAB9AD4AewBmAHIAdQBpAHQAfQA8AC8AbABpAD4ACgAgACAAIAAgACAAIAAgACAAKQApAH0ACgAgACAAIAAgACAAIAA8AC8AdQBsAD4ACgAgACAAIAAgADwALwBkAGkAdgA%2BAAoAIAAgACkAOwAKAH0ACgA%3D

Expected result

On the attached playground, the following reports Cannot determine whether this child has the required key prop.. However, if I place the JSX on the same line as the map, it doesn't report.

This reports:

const fruits = ["Apple", "Banana", "Orange"];

export function Food() {
  return (
    <div>
      <h1>Food</h1>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

This doesn't:

const fruits = ["Apple", "Banana", "Orange"];

export function Food() {
  return (
    <div>
      <h1>Food</h1>
      <ul>
        {fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
      </ul>
    </div>
  );
}

Code of Conduct

• I agree to follow Biome's Code of Conduct

[hilja]

Can confirm. v1.6.0.

[Sec-ant]

I have been learning Rust recently and want to get my feet wet. Can I give this a try? @ematipico

[Conaclos]

@Sec-ant All yours :)

[hilja]

@Sec-ant This seems to be still happening. Is it meant to work when a component spans multiple lines? All the examples are one-liners.

[Sec-ant]

@Sec-ant This seems to be still happening. Is it meant to work when a component spans multiple lines? All the examples are one-liners.

Would you mind providing the problematic code snippet?

[hilja]

@Sec-ant Managed to narrow it down. It breaks if you have a return inside the map:

const testArr = [
  { id: 1, name: 'test' },
  { id: 2, name: 'test2' },
  { id: 3, name: 'test3' },
  { id: 4, name: 'test4' },
]

export function TestFoo() {
  return (
    <div>
      <h1>Hello from Foo</h1>
      <ul>
        {testArr.map(item => {
          const { id, name } = item

          // Breaks useJsxKeyInIterable
          return (
            <li key={id}>
              <p>{name}</p>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

[Sec-ant]

@hilja It should be fixed in #2076.

[kevinwolfcr]

@Sec-ant you rock!