valid-each-key.md

Pattern: Malformed key for {#each} block

Issue: -

Description

This rule reports that {#each} block keys does not use the variables which are defined by the {#each} block.

<script>
  /* eslint svelte/valid-each-key: "error" */

  let things = [
    { id: 1, name: 'apple' },
    { id: 2, name: 'banana' },
    { id: 3, name: 'carrot' },
    { id: 4, name: 'doughnut' },
    { id: 5, name: 'egg' }
  ];
  let foo = 42;
</script>

<!-- ✓ GOOD -->
{#each things as thing (thing.id)}
  <Thing name={thing.name} />
{/each}

<!-- ✗ BAD -->
{#each things as thing (foo)}
  <Thing name={thing.name} />
{/each}

🔧 Options

Nothing.

📚 Further Reading

• Svelte - Tutorial > 4. Logic / Keyed each blocks

🚀 Version

This rule was introduced in eslint-plugin-svelte v2.28.0

🔍 Implementation

• Rule source
• Test source