Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rendering list items without a key is possible using text/comment nodes #3860

Open
Tracked by #2964
nolanlawson opened this issue Nov 14, 2023 · 1 comment
Open
Tracked by #2964
Labels

Comments

@nolanlawson
Copy link
Collaborator

In principle, component authors are not supposed to be able to render lists without keys. However, it turns out that it's possible using text nodes or comment nodes:

export default class extends LightningElement {
  items = [1, 2, 3]
}
<template for:each={items} for:item="item">
    haha no key!
</template>

Renders: haha no key!haha no key!haha no key!

<template for:each={items} for:item="item">
    <!-- haha no key! -->
</template>

Renders: <!-- haha no key! --><!-- haha no key! --><!-- haha no key! -->

Whereas if you use elements (e.g. <div>) instead of text/comment nodes, you get a compile-time error:

Error: LWC1071: Missing key for element <div> inside of iterator. Elements within iterators 
must have a unique, computed key value.

At best, this is inconsistent, and at worst, it's a loophole in the intended behavior (lists must have keys).

@nolanlawson
Copy link
Collaborator Author

Fixing this would be a breaking change for sure. I'm sure someone is relying on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant