Search code examples
javascripthtmlsveltesveltekit

Svelte how to have duplicate keys in a keyed each

I have a simple clicker app, that stores the number as a list (500 being [5,0,0]). Here's my current implementation:

{#each numbers as number (number)}
    <h1 class="score-text">{number}</h1>
{/each}

It can count up to 10, but 11 won't work as they are the same number.

each.js:135  Uncaught (in promise) Error: Cannot have duplicate keys in a keyed each: Keys at index 0 and 1 with value '1' are duplicates
    at validate_each_keys (each.js:135:10)
    at Object.update [as p] (ScoreCounter.svelte:13:23)
    at update (scheduler.js:119:30)
    at flush (scheduler.js:79:5)

What could I do to fix this?

Just placing a bunch of elements with numbers[0] through numbers[15] works, but I feel like there must be a better way.

Solution

  • Try using the loop index as key:

    {#each numbers as number, index (index)}
  <h1 class="score-text">{number}</h1>
{/each}