Svelte 7: Renderizado de listas
easy⏱ 5 mincoursesvelte
{#each} con key
Las tres partes de {#each todos as todo, i (todo.id)} cumplen funciones distintas: todo es el elemento actual, i es su índice (útil para numerar, no para identidad), y (todo.id) es la key que Svelte usa para rastrear qué <li> renderizado pertenece a qué objeto de datos a medida que el array cambia.
{#each todos as todo, i (todo.id)}
<li>{i + 1}. {todo.text}</li>
{/each}
Por qué importan las keys
Imaginá una lista de tareas, cada una con su propio checkbox, sin key. Borrá la primera tarea, y Svelte — emparejando solo por posición — conserva el nodo del DOM que renderizaba la fila 1 pero ahora muestra los datos de la fila 2, incluyendo el estado marcado que ya tenía ese checkbox. Una key estable (todo.id) le dice a Svelte que se movió la identidad, no el contenido, así que mueve el nodo real en lugar de reinterpretarlo.
Construí TodoList
Renderizá el array todos con {#each todos as todo, i (todo.id)}, numerá cada fila con i + 1, y agregá un botón que empuje un nuevo objeto al array de $state.