Keyed each blocks in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a keyed each block that uses the item's id as the key.

Svelte

<script>
  let items = [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }];
</script>

<ul>
  {#each items as item ([1])}
    <li>{item.name}</li>
  {/each}
</ul>

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

Aitem.id

Bitem.name

Citems

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using the whole array as the key instead of a unique property.

Using the item name which might not be unique.

The key in a keyed each block should be a unique identifier for each item. Here, item.id is used as the key.

2fill in blank

medium

Complete the code to update the list with a keyed each block using the correct key.

Svelte

<script>
  let fruits = [
    { id: 'a1', name: 'Mango' },
    { id: 'b2', name: 'Peach' }
  ];
</script>

<ul>
  {#each fruits as fruit ([1])}
    <li>{fruit.name}</li>
  {/each}
</ul>

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

Afruit.name

Bfruit.id

Cfruits

Dfruit

Attempts:

3 left

💡 Hint

Common Mistakes

Using the whole fruit object as the key.

Using the fruit name which might not be unique.

The key must be a unique identifier for each fruit. fruit.id is the correct key.

3fill in blank

hard

Fix the error in the keyed each block by choosing the correct key.

Svelte

<script>
  let tasks = [
    { id: 101, title: 'Clean room' },
    { id: 102, title: 'Do laundry' }
  ];
</script>

<ul>
  {#each tasks as task ([1])}
    <li>{task.title}</li>
  {/each}
</ul>

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

Atasks

Btask.title

Ctask.id

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using the task title which might not be unique.

Using the whole tasks array as the key.

The key must be a unique identifier for each task. task.id is the correct key to fix the error.

4fill in blank

hard

Fill both blanks to create a keyed each block that uses the correct key and variable names.

Svelte

<script>
  let users = [
    { uid: 1, username: 'alice' },
    { uid: 2, username: 'bob' }
  ];
</script>

<ul>
  {#each users as [1] ([2])}
    <li>{username}</li>
  {/each}
</ul>

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

Auser

Busers

Cuser.uid

Duid

Attempts:

3 left

💡 Hint

Common Mistakes

Using the plural users as the variable name.

Using just uid without the variable name as the key.

The variable name inside the each block should be user. The key should be user.uid to uniquely identify each user.

5fill in blank

hard

Fill all three blanks to create a keyed each block that uses the correct variable, key, and displays the username.

Svelte

<script>
  let members = [
    { id: 10, username: 'charlie' },
    { id: 20, username: 'diana' }
  ];
</script>

<ul>
  {#each members as [1] ([2])}
    <li>[3]</li>
  {/each}
</ul>

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

Amember

Bid

Cmember.username

Dmembers

Attempts:

3 left

💡 Hint

Common Mistakes

Using the plural members as the variable name.

Using the whole object as the key instead of the id.

Displaying the id instead of the username.

The variable name should be member. The key should be the unique id property. The displayed value should be member.username.

Practice

1. What is the main purpose of using a keyed each block in Svelte?

easy

A. To prevent the list from rendering

B. To uniquely identify list items for efficient updates

C. To sort the list items automatically

D. To style list items differently

Solution

1. Step 1: Understand what keyed each blocks do

   Keyed each blocks use a unique key to track each item in a list, helping Svelte update only changed items.

2. Step 2: Identify the main purpose

   This unique key helps keep the UI consistent and efficient when the list changes dynamically.

3. Final Answer:

   To uniquely identify list items for efficient updates -> Option B

4. Quick Check:

   Keyed each blocks track items uniquely = D [OK]

Hint: Keys track items uniquely for smooth updates [OK]

Common Mistakes:

• Thinking keys are for styling
• Assuming keys sort items
• Believing keys stop rendering

2. Which of the following is the correct syntax for a keyed each block in Svelte?

easy

A. {#each items as item (item.id)}

B. {#each items as item}

C. {#each items (item.id)}

D. {#each items item.id as item}

Solution

1. Step 1: Recall keyed each block syntax

   The correct syntax uses parentheses after the 'as' clause to specify the key: {#each items as item (item.id)}

2. Step 2: Compare options

   {#each items as item (item.id)} matches the correct syntax exactly, others miss parentheses or order.

3. Final Answer:

   {#each items as item (item.id)} -> Option A

4. Quick Check:

   Key goes in parentheses after 'as' = B [OK]

Hint: Key is inside parentheses after 'as' in each block [OK]

Common Mistakes:

• Omitting parentheses around the key
• Placing key before 'as'
• Using wrong order of parameters

3. Given the code:

{#each users as user (user.id)}
  
{user.name}
{/each}

What happens if the users array changes by adding a new user with a unique id?

medium

A. Only the new user is added to the DOM without re-rendering existing users

B. All users are re-rendered from scratch

C. The list will not update until the page reloads

D. An error occurs because keys must be strings

Solution

1. Step 1: Understand keyed each block behavior on list change

   When a new item with a unique key is added, Svelte updates only that item in the DOM.

2. Step 2: Analyze the effect of adding a new user

   The existing users remain unchanged; only the new user is inserted efficiently.

3. Final Answer:

   Only the new user is added to the DOM without re-rendering existing users -> Option A

4. Quick Check:

   Keyed blocks update only changed items = C [OK]

Hint: New unique keys add items without full re-render [OK]

Common Mistakes:

• Thinking all items re-render on change
• Believing list updates require page reload
• Assuming keys must be strings only

4. Consider this Svelte code snippet:

{#each items as item (item.key)}
  
{item.value}
{/each}

If item.key is not unique for all items, what problem can occur?

medium

A. Svelte will automatically fix duplicate keys

B. The code will throw a syntax error

C. The list will not render at all

D. Svelte may reuse DOM elements incorrectly, causing UI bugs

Solution

1. Step 1: Understand the role of unique keys

   Keys must be unique to correctly track each item; duplicates confuse Svelte's DOM updates.

2. Step 2: Identify the effect of duplicate keys

   With duplicate keys, Svelte may wrongly reuse DOM elements, causing wrong data to show or UI glitches.

3. Final Answer:

   Svelte may reuse DOM elements incorrectly, causing UI bugs -> Option D

4. Quick Check:

   Duplicate keys cause wrong DOM reuse = A [OK]

Hint: Keys must be unique to avoid UI bugs [OK]

Common Mistakes:

• Expecting syntax errors from duplicates
• Thinking list won't render at all
• Assuming Svelte fixes duplicates automatically

5. You have a list of tasks with possible duplicate names but unique IDs. You want to display them with a keyed each block and allow dynamic reordering. Which key should you use and why?

{#each tasks as task (???)}
  
{task.name}
{/each}

hard

A. Use the index like each tasks as task (index) for simplicity

B. Use task.name because names are easier to read

C. Use task.id because IDs are unique and stable keys

D. No key is needed for dynamic lists

Solution

1. Step 1: Identify the best key for dynamic lists

   Keys must be unique and stable to track items correctly during reordering.

2. Step 2: Compare key options

   Task IDs are unique and stable, while names can duplicate and indexes change on reorder.

3. Final Answer:

   Use task.id because IDs are unique and stable keys -> Option C

4. Quick Check:

   Unique stable keys like IDs are best for dynamic lists = A [OK]

Hint: Use unique stable IDs as keys for dynamic lists [OK]

Common Mistakes:

• Using non-unique names as keys
• Using index keys causing wrong updates
• Skipping keys on dynamic lists