Each blocks ({#each}) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to loop over the items array and display each item.

Svelte

<ul>
  {#each [1] as item}
    <li>{item}</li>
  {/each}
</ul>

Drag options to blanks, or click blank then click option'

Aitems

Bitem

Clist

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using the loop variable name instead of the array name.

Using a variable that does not exist.

The {#each} block loops over the array named items. You must put the array name after {#each.

2fill in blank

medium

Complete the code to include the index of each item in the loop.

Svelte

<ul>
  {#each items as item, [1]
    <li>{index}: {item}</li>
  {/each}
</ul>

Drag options to blanks, or click blank then click option'

Aindex

Bcount

Ckey

Dnum

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not the index.

Forgetting the comma between item and index.

The second variable after as item, is the index of the current item in the array. It is commonly named index.

3fill in blank

hard

Fix the error in the each block syntax to correctly loop over tasks.

Svelte

{#each tasks [1] task}
  <p>{task.name}</p>
{/each}

Drag options to blanks, or click blank then click option'

Ain

Bwith

Cof

Das

Attempts:

3 left

💡 Hint

Common Mistakes

Using JavaScript keywords like in or of instead of as.

Omitting the keyword entirely.

The correct syntax for Svelte each blocks is {#each array as item}. The keyword as is required.

4fill in blank

hard

Fill both blanks to loop over users and get both the user and their index.

Svelte

{#each [1] as [2], idx}
  <p>{idx + 1}. {user}</p>
{/each}

Drag options to blanks, or click blank then click option'

Ausers

Buser

CusersList

Dperson

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not match the block content.

Using a wrong array name.

The first blank is the array users. The second blank is the variable name for each user, user.

5fill in blank

hard

Fill all three blanks to create an each block that loops over products, gets each product, and its index.

Svelte

{#each [1] as [2], [3]
  <div>{index}: {product.name}</div>
{/each}

Drag options to blanks, or click blank then click option'

Aitems

Bproduct

Cindex

Dproducts

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the variable names.

Using a wrong array name.

The array is products. The item variable is product. The index variable is index.

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