0
0
Svelteframework~20 mins

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

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Each Blocks Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
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>
Attempts:
2 left
💡 Hint

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

📝 Syntax
intermediate
2:00remaining
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}
Attempts:
2 left
💡 Hint

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

🔧 Debug
advanced
2:00remaining
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>
ASyntaxError: Unexpected token in {#each} block
BTypeError: numbers is not iterable
CNo error, renders empty list
DReferenceError: numbers is not defined
Attempts:
2 left
💡 Hint

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

❓ state_output
advanced
2:00remaining
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>
Attempts:
2 left
💡 Hint

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

🧠 Conceptual
expert
2:00remaining
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?

ATo help Svelte track which items changed and update only those, improving performance
BTo make the list items appear in alphabetical order automatically
CTo prevent syntax errors when the list is empty
DTo enable two-way binding on each item in the list
Attempts:
2 left
💡 Hint

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