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.