Use directive syntax in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component?

Consider this Svelte code using the use: directive. What will be the text content of the <div> after the component mounts?

Svelte

<script>
  function highlight(node) {
    node.style.backgroundColor = 'yellow';
  }
</script>

<div use:highlight>Hello</div>

A The div text will be 'Hello' with a yellow background.

B The div text will be 'Hello' with no background color change.

C The div will be empty with a yellow background.

D The component will throw a runtime error.

💡 Hint

The use: directive runs the function with the element as argument after mount.

The use:highlight directive calls the highlight function with the div node, which sets its background color to yellow. The text remains 'Hello'.

📝 Syntax

intermediate

Which option correctly uses the use: directive to add a tooltip?

You want to add a tooltip to a button using a use: directive. Which code snippet is correct?

A <script>function tooltip(node) { node.title = 'Click me'; }</script><button use={tooltip}>Press</button>

B <script>function tooltip(node) { node.title = 'Click me'; }</script><button use-tooltip>Press</button>

C <script>function tooltip(node) { node.title = 'Click me'; }</script><button use:tooltip>Press</button>

D <script>function tooltip(node) { node.title = 'Click me'; }</script><button use:tooltip()>Press</button>

💡 Hint

The correct syntax is use:action without parentheses.

The use: directive requires the function name without parentheses or braces. Option C uses use:tooltip correctly.

🔧 Debug

advanced

Why does this use: directive not update when the parameter changes?

Look at this Svelte code. The use:color directive sets the background color. Why does the background not update when color changes?

Svelte

<script>
  export let color = 'red';
  function colorAction(node) {
    node.style.backgroundColor = color;
  }
</script>

<div use:colorAction>Box</div>

<button on:click={() => color = 'blue'}>Change Color</button>

A The button click does not update <code>color</code> because the event handler is missing parentheses.

B The <code>color</code> variable is not reactive because it is not declared with <code>let</code>.

C The <code>use:</code> directive syntax is incorrect and causes the update to fail.

D The action function does not react to changes in <code>color</code> because it runs only once on mount.

💡 Hint

Actions run once when the element is created and do not rerun automatically on variable changes.

The colorAction function runs once when the element mounts. It does not rerun when color changes. To update, the action must handle parameter changes explicitly.

🧠 Conceptual

advanced

What is the purpose of the return value in a use: action function?

In Svelte, a use: action function can return an object with an update and/or destroy method. What is the main purpose of these methods?

A <code>update</code> allows the action to react to parameter changes; <code>destroy</code> cleans up when the element is removed.

B <code>update</code> reruns the entire component; <code>destroy</code> resets all variables.

C <code>update</code> is called only once on mount; <code>destroy</code> is never called.

D <code>update</code> changes the component's props; <code>destroy</code> reloads the page.

💡 Hint

Think about how actions can respond to changes and clean up resources.

The update method lets the action respond when parameters change. The destroy method cleans up event listeners or other resources when the element is removed.

❓ state_output

expert

What is the final background color after clicking the button twice?

Analyze this Svelte component using a use: directive with parameters. What is the background color of the <div> after clicking the button twice?

Svelte

<script>
  import { writable } from 'svelte/store';
  const colors = ['red', 'green', 'blue'];
  let index = 0;
  let currentColor = colors[index];

  function colorAction(node, color) {
    node.style.backgroundColor = color;
    return {
      update(newColor) {
        node.style.backgroundColor = newColor;
      }
    };
  }

  function changeColor() {
    index = (index + 1) % colors.length;
    currentColor = colors[index];
  }
</script>

<div use:colorAction={currentColor}>Color Box</div>
<button on:click={changeColor}>Change Color</button>

A The background color will not change from the initial color.

B The background color will be 'blue'.

C The background color will be 'red'.

D The background color will be 'green'.

💡 Hint

Each click updates currentColor and triggers the action's update method.

Initial color is 'red'. First click changes to 'green', second click changes to 'blue'. After two clicks, the color is 'blue'.

Practice

1. Which Svelte directive is used to conditionally show content based on a boolean value?
{#if}, {#each}, on:, or bind:?

easy

A. bind:

B. {#if}

C. on:

D. {#each}

Solution

1. Step 1: Understand the purpose of {#if}

   The {#if} directive in Svelte shows or hides content based on a condition.

2. Step 2: Compare with other directives

   {#each} loops over lists, on: handles events, and bind: links variables to inputs.

3. Final Answer:

   {#if} -> Option B

4. Quick Check:

   Conditional display = {#if} [OK]

Hint: Use {#if} to show/hide content based on true/false [OK]

Common Mistakes:

• Confusing {#if} with {#each} for loops
• Using on:click for conditional display
• Trying to bind variables for conditionals

2. Which of the following is the correct syntax to listen for a click event on a button in Svelte?

easy

A. <button onClick={handleClick}>Click</button>

B. <button click={handleClick}>Click</button>

C. <button on:click={handleClick}>Click</button>

D. <button bind:click={handleClick}>Click</button>

Solution

1. Step 1: Recall Svelte event directive syntax

   Svelte uses on:eventName={handler} to listen to events like clicks.

2. Step 2: Check each option

   <button on:click={handleClick}>Click</button> uses on:click correctly. Options A, B, and D use incorrect or invalid syntax.

3. Final Answer:

   <button on:click={handleClick}>Click</button> -> Option C

4. Quick Check:

   Event listener syntax = on:event [OK]

Hint: Use on:eventName={handler} to listen for events [OK]

Common Mistakes:

• Using camelCase like onClick instead of on:click
• Trying to bind events with bind:
• Omitting the on: prefix

3. What will be the rendered output of this Svelte code?

<script>
  let items = ['apple', 'banana'];
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

medium

A. applebanana

B. items

C. {item}{item}

D. Syntax error

Solution

1. Step 1: Understand the {#each} directive

   The {#each} directive loops over the array items and assigns each element to item.

2. Step 2: Render list items

   For each item, it creates a <li> element with the item text inside.

3. Final Answer:

   <ul><li>apple</li><li>banana</li></ul> -> Option A

4. Quick Check:

   Loop items render as list =
   • apple
   • banana
   [OK]

Hint: Each loops output list items for each array element [OK]

Common Mistakes:

• Expecting the literal string {item} to show
• Confusing the array name with item variable
• Thinking it causes a syntax error

4. Identify the error in this Svelte snippet:

<script>
  let count = 0;
</script>

<button on:click="count++">Increment</button>
<p>Count: {count}</p>

medium

A. Using double quotes around the event handler expression

B. Missing bind: directive on count variable

C. Incorrect variable name count

D. No error, code works fine

Solution

1. Step 1: Check event handler syntax

   Svelte requires event handlers to use curly braces without quotes: on:click={count++}.

2. Step 2: Identify the error

   The code uses quotes around the expression, which causes a syntax error.

3. Final Answer:

   Using double quotes around the event handler expression -> Option A

4. Quick Check:

   Event handler must be unquoted expression [OK]

Hint: Use curly braces, not quotes, for event handlers [OK]

Common Mistakes:

• Putting event handler code inside quotes
• Trying to bind variables unnecessarily
• Assuming variable name is wrong

5. You want to create a Svelte component that shows a list of tasks and lets the user toggle each task's completion status by clicking a checkbox. Which directive syntax combination correctly binds the checkbox state and updates the task's done property?

hard

A. <ul>
{#each tasks as task}
<li>
<input type="checkbox" on:click={task.done = !task.done} /> {task.text}
</li>
{/each}
</ul>

B. <ul>
{#each tasks as task}
<li>
<input type="checkbox" checked={task.done} on:change={() => task.done = !task.done} /> {task.text}
</li>
{/each}
</ul>

C. <ul>
{#each tasks as task}
<li>
<input type="checkbox" bind:value={task.done} /> {task.text}
</li>
{/each}
</ul>

D. <script>
let tasks = [
{ id: 1, text: 'Task 1', done: false },
{ id: 2, text: 'Task 2', done: true }
];
</script>

<ul>
{#each tasks as task}
<li>
<input type="checkbox" bind:checked={task.done} /> {task.text}
</li>
{/each}
</ul>

Solution

1. Step 1: Understand binding checkbox state

   In Svelte, bind:checked links the checkbox's checked state directly to a variable, updating it automatically.

2. Step 2: Analyze each option

   <script>
     let tasks = [
       { id: 1, text: 'Task 1', done: false },
       { id: 2, text: 'Task 2', done: true }
     ];
   </script>
   
   <ul>
     {#each tasks as task}
       <li>
         <input type="checkbox" bind:checked={task.done} /> {task.text}
       </li>
     {/each}
   </ul>

   uses bind:checked={task.done}, which is correct.

   <ul>
     {#each tasks as task}
       <li>
         <input type="checkbox" checked={task.done} on:change={() => task.done = !task.done} /> {task.text}
       </li>
     {/each}
   </ul>

   manually toggles on change but is more complex.

   <ul>
     {#each tasks as task}
       <li>
         <input type="checkbox" bind:value={task.done} /> {task.text}
       </li>
     {/each}
   </ul>

   uses bind:value which is incorrect for checkboxes.

   <ul>
     {#each tasks as task}
       <li>
         <input type="checkbox" on:click={task.done = !task.done} /> {task.text}
       </li>
     {/each}
   </ul>

   uses on:click without binding, which is less reactive.

3. Final Answer:

   bind:checked={task.done} -> Option D

4. Quick Check:

   Checkbox bind:checked updates variable automatically [OK]

Hint: Use bind:checked to sync checkbox with boolean variable [OK]

Common Mistakes:

• Using bind:value instead of bind:checked for checkboxes
• Manually toggling state instead of binding
• Using on:click without reactive binding