Bucles each

• Útil para trabajar con listas de datos o cualquier objeto iterable
• Si el {#each} renderiza una lista donde cada item tiene un id y el array puede cambiar de forma distinta a "solo agregar al final" es recomendable agregar la key.
• La key se escribe entre parentesis ( ), no es lo mismo que el índice
• Se puede usar cualquier objeto como key, es decir, se podría usar (thing) en lugar de (thing.id). Sin embargo, usar un string o un número suele ser más seguro, ya que significa que la identidad persiste sin igualdad referencial, por ejemplo, al actualizar con datos nuevos de un servidor API.
• Opcionalmente se puede obtener el índice como segundo argumento

App.svelte

<script>
  const colors = ['red', 'orange', 'yellow'];
  let selected = $state(colors[0]); // Valor en la posicion 0 que es 'red'
</script>

<h1 style="color: {selected}">Pick a color</h1>

<div>
  {#each colors as color (color), i}
    <button
      style="background: {color}"
      aria-label={color}
      aria-current={selected === color}
      onclick={() => selected = color}
      >
      {i + 1}
    </button>
  {/each}
</dvi>