Each blocks ({#each}) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the {#each} block in Svelte?

The {#each} block is used to loop over an array or list and render a block of HTML for each item in that list.

beginner

How do you access the current item inside an {#each} block?

You give a name to the current item in the syntax: {#each items as item}, then use that name inside the block to access the item.

intermediate

Why should you provide a unique key when using {#each} blocks?

Providing a unique key helps Svelte track each item efficiently when the list changes, improving performance and avoiding rendering bugs.

beginner

Write the syntax to loop over an array called 'fruits' and display each fruit name inside a <li> element.

{#each fruits as fruit}
• {fruit}
{/each}

beginner

What happens if the array used in {#each} is empty?

Nothing is rendered inside the {#each} block unless you use an {:else} block to show alternative content.

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

A Loops over a list and renders HTML for each item

B Defines a function

C Imports a component

D Declares a variable

The {#each} block loops over arrays or lists and renders HTML for each item.

How do you write an {#each} block for an array named 'tasks' with item named 'task'?

A {#each task}

B {#each task as tasks}

C {#each tasks as task}

D {#each tasks}

The correct syntax is {#each tasks as task} to loop over 'tasks' with 'task' as the current item.

Why is it recommended to add a key in {#each} blocks?

A To style the list

B To declare variables

C To import data

D To improve rendering performance and track items

Keys help Svelte track list items efficiently when the list changes.

What will happen if the array in {#each} is empty and no {:else} block is provided?

A Nothing will be rendered inside the block

B An error will occur

C The first item will be repeated

D The whole page will reload

If the array is empty and no {:else} block is used, nothing renders inside the {#each} block.

Which of the following is the correct way to add a key to an {#each} block?

A {#each items as item key=item.id}

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

C {#each items with key item.id}

D {#each items item.id}

The correct syntax for keys is {#each items as item (item.id)}.

Explain how to use the {#each} block in Svelte to display a list of names.

Think about how you tell Svelte to repeat HTML for each name.

Describe why adding a unique key in an {#each} block is important and how to do it.

Keys help Svelte know which items changed when the list updates.