How to Use Each Block in Svelte for Lists

In Svelte, use the {#each} block to loop over arrays and render elements for each item. The syntax is {#each array as item} followed by the HTML to repeat, ending with {/each}. This lets you display lists dynamically in your component.

Syntax

The {#each} block loops over an array or iterable. Inside the block, you define a variable for each item. You close the block with {/each}. Optionally, you can get the index of each item.

• {#each array as item}: loops over array, naming each element item.
• {#each array as item, index}: also gets the current index.
• {/each}: ends the loop block.

svelte

<script>
  let fruits = ['apple', 'banana', 'cherry'];
</script>

<ul>
  {#each fruits as fruit, i}
    <li>{i + 1}: {fruit}</li>
  {/each}
</ul>

Output

<ul>
  <li>1: apple</li>
  <li>2: banana</li>
  <li>3: cherry</li>
</ul>

Example

This example shows how to display a list of tasks with their status using the {#each} block. It demonstrates looping, using the index, and conditional rendering inside the loop.

svelte

<script>
  let tasks = [
    { id: 1, title: 'Wash dishes', done: false },
    { id: 2, title: 'Do laundry', done: true },
    { id: 3, title: 'Write code', done: false }
  ];
</script>

<ul>
  {#each tasks as task, index}
    <li>
      <strong>{index + 1}. {task.title}</strong> - 
      {#if task.done}
        <em>Done</em>
      {:else}
        <em>Pending</em>
      {/if}
    </li>
  {/each}
</ul>

Output

<ul>
  <li><strong>1. Wash dishes</strong> - <em>Pending</em></li>
  <li><strong>2. Do laundry</strong> - <em>Done</em></li>
  <li><strong>3. Write code</strong> - <em>Pending</em></li>
</ul>

Common Pitfalls

Common mistakes when using {#each} include:

• Forgetting to close the block with {/each}, which causes errors.
• Not providing a unique key when rendering complex lists, which can cause inefficient updates.
• Trying to loop over a non-iterable value like null or undefined.

Always ensure your array exists and consider using key for better performance when items change.

svelte

<script>
  let items = null;
</script>

<!-- Wrong: looping over null causes error -->
{#each items as item}
  <p>{item}</p>
{/each}

<!-- Right: check if array exists -->
{#if items}
  {#each items as item}
    <p>{item}</p>
  {/each}
{:else}
  <p>No items to show.</p>
{/if}

Output

<p>No items to show.</p>

Quick Reference

Usage	Description
{#each array as item}	Loop over array, assign each element to item
{#each array as item, index}	Loop with access to current index
{/each}	End the each block
{#each array as item (item.id)}	Use a key for better list updates
{#if condition} ... {:else} ... {/if}	Use inside each for conditional rendering

Key Takeaways

Use {#each array as item} ... {/each} to loop over arrays in Svelte.

Include the index with {#each array as item, index} when you need item positions.

Always close the each block with {/each} to avoid errors.

Check that the array exists before looping to prevent runtime errors.

Use keys with (key) syntax for better performance on dynamic lists.