Each blocks ({#each}) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Svelte component?

Consider this Svelte code snippet:

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

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

What will be the HTML output inside the <ul>?

Svelte

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

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

A <ul><li>apple</li><li>banana</li><li>cherry</li></ul>

B <ul><li>0: apple</li><li>1: banana</li><li>2: cherry</li></ul>

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

D <ul><li>1: apple</li><li>1: banana</li><li>1: cherry</li></ul>

💡 Hint

Remember that the index i starts at 0, so adding 1 adjusts it to start at 1.

The {#each} block loops over the fruits array. The second variable i is the zero-based index. Adding 1 to i makes the list start counting from 1.

📝 Syntax

intermediate

Which option correctly uses the {#each} block with a key in Svelte?

In Svelte, when rendering a list, you can provide a key to help with efficient updates.

Which of the following code snippets correctly uses a key with the {#each} block?

A {#each items as item (item.id)}<div>{item.name}</div>{/each}

B {#each items as item (key: item.id)}<div>{item.name}</div>{/each}

C {#each items as item, key item.id}<div>{item.name}</div>{/each}

D {#each items as item key item.id}<div>{item.name}</div>{/each}

💡 Hint

The key is placed in parentheses immediately after the as item part.

The correct syntax for keys in Svelte's {#each} block is {#each items as item (item.id)}. This helps Svelte track items efficiently.

🔧 Debug

advanced

Why does this {#each} block cause a runtime error?

Look at this Svelte code:

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

<ul>
  {#each numbers as n}
    <li>{n}</li>
  {/each}
</ul>

What error will this code cause when run?

Svelte

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

<ul>
  {#each numbers as n}
    <li>{n}</li>
  {/each}
</ul>

A SyntaxError: Unexpected token in {#each} block

B TypeError: numbers is not iterable

C No error, renders empty list

D ReferenceError: numbers is not defined

💡 Hint

The {#each} block expects an array or iterable. What happens if it gets null?

Since numbers is null, it is not iterable. The {#each} block tries to loop over it and throws a TypeError.

❓ state_output

advanced

What is the output after clicking the button once?

Consider this Svelte component:

<script>
  let items = ['a', 'b'];
  function addItem() {
    items = [...items, 'c'];
  }
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

<button on:click={addItem}>Add</button>

What will the list show after clicking the button once?

Svelte

<script>
  let items = ['a', 'b'];
  function addItem() {
    items = [...items, 'c'];
  }
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

<button on:click={addItem}>Add</button>

A <ul><li>a</li><li>b</li><li>b</li></ul>

B <ul><li>a</li><li>b</li></ul>

C <ul><li>c</li></ul>

D <ul><li>a</li><li>b</li><li>c</li></ul>

💡 Hint

Think about how the array changes when you add 'c' and how Svelte updates the list.

The addItem function creates a new array with 'c' added at the end. The {#each} block rerenders showing 'a', 'b', and 'c'.

🧠 Conceptual

expert

Why is using a key in {#each} blocks important in Svelte?

When rendering lists with {#each} in Svelte, you can provide a key for each item.

What is the main reason to use keys in {#each} blocks?

A To help Svelte track which items changed and update only those, improving performance

B To make the list items appear in alphabetical order automatically

C To prevent syntax errors when the list is empty

D To enable two-way binding on each item in the list

💡 Hint

Think about how Svelte updates the DOM when list items change.

Keys help Svelte identify which items changed, were added, or removed. This allows efficient updates without re-rendering the entire list.

Practice

1. What does the {#each} block do in Svelte?

easy

A. Creates a conditional statement to show or hide content

B. Repeats a block of HTML for each item in a list

C. Defines a reusable component

D. Declares a reactive variable

Solution

1. Step 1: Understand the purpose of {#each}

   The {#each} block is used to repeat content for every item in a list or array.

2. Step 2: Compare with other options

   Options A, C, and D describe other Svelte features, not list repetition.

3. Final Answer:

   Repeats a block of HTML for each item in a list -> Option B

4. Quick Check:

   {#each} = repeat list items [OK]

Hint: Remember: {#each} loops over lists [OK]

Common Mistakes:

• Confusing {#each} with {#if}
• Thinking it creates components
• Assuming it declares variables

2. Which of the following is the correct syntax to loop over an array items and display each item in Svelte?

easy

A. {#each items to item} <p>{item}</p> {/each}

B. {#each item in items} <p>{item}</p> {/each}

C. {#each items for item} <p>{item}</p> {/each}

D. {#each items as item} <p>{item}</p> {/each}

Solution

1. Step 1: Recall Svelte each block syntax

   The correct syntax is {#each array as item} to loop over an array.

2. Step 2: Check each option

   Only {#each items as item} <p>{item}</p> {/each} uses as correctly. Options A, B, and C use incorrect keywords.

3. Final Answer:

   {#each items as item} <p>{item}</p> {/each} -> Option D

4. Quick Check:

   Use as keyword in {#each} [OK]

Hint: Use 'as' keyword: {#each array as item} [OK]

Common Mistakes:

• Using 'in' instead of 'as'
• Using 'for' or 'to' keywords
• Missing the 'as' keyword

3. Given the code:

{`


  {#each fruits as fruit, i}
    
{i}: {fruit}
  {/each}
`}

What will be the rendered output inside the <ul>?

medium

A. 0: apple1: banana2: cherry

B. apple: 0banana: 1cherry: 2

C. 1: apple2: banana3: cherry

D. fruit: applefruit: bananafruit: cherry

Solution

1. Step 1: Understand the each block variables

   The loop uses fruit for the item and i for the index starting at 0.

2. Step 2: Match output format

   Each list item shows index, colon, then fruit name, so output is 0: apple, 1: banana, 2: cherry.

3. Final Answer:

   <li>0: apple</li><li>1: banana</li><li>2: cherry</li> -> Option A

4. Quick Check:

   Index starts at 0, item after colon [OK]

Hint: Index starts at 0 in {#each items as item, i} [OK]

Common Mistakes:

• Confusing index and item order
• Starting index at 1 instead of 0
• Using wrong variable names

4. What is wrong with this Svelte code snippet?

{`


  {#each numbers as number}
    
{num}
  {/each}
`}

medium

A. The variable inside the block should be 'number', not 'num'

B. The array 'numbers' is not defined

C. The each block syntax is incorrect

D. Missing closing {/each} tag

Solution

1. Step 1: Check variable names inside each block

   The loop defines number as the item, but inside the block it uses {num}, which is undefined.

2. Step 2: Verify other syntax parts

   The array is defined, the each block syntax and closing tag are correct.

3. Final Answer:

   The variable inside the block should be 'number', not 'num' -> Option A

4. Quick Check:

   Use same variable name inside each block [OK]

Hint: Use the exact loop variable name inside the block [OK]

Common Mistakes:

• Using a different variable name inside the block
• Forgetting to close the each block
• Misnaming the array variable

5. You want to render a list of users with unique IDs and update the list efficiently when users change. Which is the best way to use {#each} with keys in Svelte?

hard

A. {#each users as user (user.name)} <p>{user.name}</p> {/each}

B. {#each users as user} <p>{user.name}</p> {/each}

C. {#each users as user (user.id)} <p>{user.name}</p> {/each}

D. {#each users as user (index)} <p>{user.name}</p> {/each}

Solution

1. Step 1: Understand keys in each blocks

   Keys help Svelte track items uniquely for efficient updates. The key should be a unique, stable identifier like user.id.

2. Step 2: Evaluate options

   {#each users as user (user.id)} <p>{user.name}</p> {/each} uses user.id as key, which is best. {#each users as user} <p>{user.name}</p> {/each} has no key, less efficient. {#each users as user (user.name)} <p>{user.name}</p> {/each} uses user.name, which may not be unique. {#each users as user (index)} <p>{user.name}</p> {/each} uses index, which can cause issues when list changes.

3. Final Answer:

   {#each users as user (user.id)} <p>{user.name}</p> {/each} -> Option C

4. Quick Check:

   Use unique ID as key in each block [OK]

Hint: Use unique IDs as keys: {#each items as item (item.id)} [OK]

Common Mistakes:

• Not using keys at all
• Using non-unique keys like names
• Using index as key causing update bugs