Component bindings in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component with two-way binding?

Consider this Svelte code snippet:

  <script>
    let name = 'Alice';
  </script>

  <input bind:value={name} />
  <p>Hello {name}!</p>

What happens when the user types "Bob" in the input?

Svelte

<script>
  let name = 'Alice';
</script>

<input bind:value={name} />
<p>Hello {name}!</p>

A The paragraph updates live to show 'Hello Bob!' as the user types.

B The paragraph stays 'Hello Alice!' until the input loses focus.

C The input does not update the variable 'name'.

D Typing in the input causes a runtime error.

💡 Hint

Think about what bind:value does in Svelte.

The bind:value directive creates a two-way binding between the input's value and the variable name. So as the user types, name updates immediately, and the paragraph reflects the change live.

❓ state_output

intermediate

What is the value of 'count' after clicking the button twice?

Given this Svelte component:

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

<button on:click={() => count += 1}>Increment</button>
<p>Count: {count}</p>

What will be displayed after clicking the button two times?

Svelte

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

<button on:click={() => count += 1}>Increment</button>
<p>Count: {count}</p>

A Count: 0

B Count: 1

C Count: 2

D The component throws an error on click.

💡 Hint

Each click increases count by 1.

Each button click runs the function that adds 1 to count. After two clicks, count is 2, so the paragraph shows 'Count: 2'.

📝 Syntax

advanced

Which option correctly binds a child component's prop to a parent variable?

Given a child component <Child /> with a prop value, which parent code correctly binds the parent's parentValue variable to the child's value prop for two-way binding?

A <Child bind:value={parentValue} />

B <Child value={parentValue} bind:value />

C <Child bind:value>{parentValue}</Child>

D <Child bind:value:parentValue />

💡 Hint

Remember the Svelte syntax for binding props.

The correct syntax for two-way binding a prop is bind:propName={variable}. Option A uses this correctly.

🔧 Debug

advanced

Why does this Svelte component fail to update the parent variable?

Parent component code:

<script>
  let text = 'Hello';
</script>

<Child bind:value={text} />

<p>Parent text: {text}</p>

Child component code:

<script>
  export let value;
</script>

<input type="text" value={value} />

Why does typing in the child's input not update the parent's text?

A The child component must emit a custom event to update the parent.

B The parent variable <code>text</code> is not declared with <code>let</code>.

C The parent must use <code>bind:this</code> to link the child.

D The child input lacks <code>bind:value</code>, so changes don't propagate.

💡 Hint

Check how the child's input is connected to the prop.

In Svelte, to enable two-way binding, the child must bind the input's value to the prop using bind:value. Without it, changes in the input don't update the prop, so the parent variable stays unchanged.

🧠 Conceptual

expert

What happens if you bind a prop to a constant value in Svelte?

Consider this parent component code:

<Child bind:value={42} />

And the child component has:

<script>
  export let value;
</script>

<input bind:value={value} />

What will happen when the user types in the input?

A The input is read-only and cannot be changed by the user.

B A runtime error occurs because you cannot bind to a constant.

C The input updates visually but the parent value remains 42 unchanged.

D The parent variable 42 updates to the new input value.

💡 Hint

Think about what binding means and if constants can be updated.

Binding requires a variable that can be updated. Binding to a constant like 42 is invalid and causes a runtime error because Svelte cannot assign a new value to a constant.

Practice

1. What does bind:value do in a Svelte component?

easy

A. It creates a two-way connection between a variable and an input's value.

B. It only sets the initial value of the input without updating.

C. It listens for clicks on the input element.

D. It disables the input field.

Solution

1. Step 1: Understand bind:value usage

   In Svelte, bind:value links a variable to an input's value so changes update both ways.

2. Step 2: Compare options with behavior

   Only It creates a two-way connection between a variable and an input's value. describes this two-way syncing correctly; others describe unrelated behaviors.

3. Final Answer:

   It creates a two-way connection between a variable and an input's value. -> Option A

4. Quick Check:

   Two-way binding = It creates a two-way connection between a variable and an input's value. [OK]

Hint: Remember: bind:value syncs input and variable both ways [OK]

Common Mistakes:

• Thinking bind:value only sets initial value
• Confusing bind:value with event listeners
• Assuming bind:value disables input

2. Which of the following is the correct syntax to bind a parent's variable count to a child's prop value in Svelte?

easy

A.

B. count

C.

D.

Solution

1. Step 1: Recall Svelte binding syntax

   To bind a parent's variable to a child's prop, use bind:prop={variable} syntax.

2. Step 2: Evaluate options

   <Child bind:value={count} /> matches correct syntax. <Child value={count} /> passes value one-way. Options B and D have invalid syntax.

3. Final Answer:

   <Child bind:value={count} /> -> Option D

4. Quick Check:

   Correct bind syntax = <Child bind:value={count} /> [OK]

Hint: Use bind:prop={variable} to sync parent and child [OK]

Common Mistakes:

• Using curly braces without bind:
• Trying to bind without ={}
• Passing value as child content instead of prop

3. Given this Svelte code:

<script>
  let name = 'Alice';
</script>

<Child bind:name />

<!-- Child.svelte -->
<script>
  export let name;
</script>

<input bind:value={name} />

What happens when the user types 'Bob' in the input?

medium

A. An error occurs because bind:name is invalid.

B. Only the child's name updates; parent stays 'Alice'.

C. The parent's name variable updates to 'Bob' automatically.

D. The input value resets to 'Alice' immediately.

Solution

1. Step 1: Understand two-way binding between parent and child

   The parent binds name to child's name prop with bind:name, syncing both variables.

2. Step 2: Input binding updates child's name and propagates to parent

   Typing in input updates child's name, which updates parent's name automatically.

3. Final Answer:

   The parent's name variable updates to 'Bob' automatically. -> Option C

4. Quick Check:

   Two-way bind updates parent and child = The parent's name variable updates to 'Bob' automatically. [OK]

Hint: bind:prop syncs parent and child variables both ways [OK]

Common Mistakes:

• Thinking only child updates
• Expecting input to reset on typing
• Believing bind:name is invalid syntax

4. Identify the error in this Svelte code snippet:

<script>
  let age = 30;
</script>

<Child bind:age></Child>

<!-- Child.svelte -->
<script>
  export let age;
</script>

<input value={age} />

medium

A. The child input should use bind:value={age} for two-way binding.

B. The parent variable age must be a string, not a number.

C. The child component must not export age to bind it.

D. The parent should use bind:age={age} instead.

Solution

1. Step 1: Check child input binding

   The child input uses value={age}, which is one-way binding only.

2. Step 2: Fix to two-way binding for sync

   To sync changes back to parent, child input must use bind:value={age}.

3. Final Answer:

   The child input should use bind:value={age} for two-way binding. -> Option A

4. Quick Check:

   Two-way input binding needed = The child input should use bind:value={age} for two-way binding. [OK]

Hint: Use bind:value on inputs for two-way sync, not value= alone [OK]

Common Mistakes:

• Using value= instead of bind:value= on inputs
• Thinking export let disables binding
• Misusing bind:age syntax on parent

5. You want to create a custom slider component that updates a parent's volume variable as the slider moves. Which approach correctly uses Svelte component bindings to achieve this?

hard

A. In parent: <Slider value={volume} />In Slider.svelte: export let value; and <input type='range' value={value} />

B. In parent: <Slider bind:value={volume} />In Slider.svelte: export let value; and <input type='range' bind:value={value} />

C. In parent: <Slider bind:volume={volume} />In Slider.svelte: export let volume; and <input type='range' bind:value={volume} />

D. In parent: <Slider bind:value />In Slider.svelte: let value; and <input type='range' bind:value={value} />

Solution

1. Step 1: Understand binding prop names

   The parent binds its volume variable to child's value prop using bind:value={volume}.

2. Step 2: Child exports value and binds input's value to it

   The child exports value and uses bind:value={value} on the input for two-way sync.

3. Step 3: Check other options for errors

   In parent: <Slider value={volume} />
   In Slider.svelte: export let value; and <input type='range' value={value} /> uses one-way binding only. In parent: <Slider bind:volume={volume} />
   In Slider.svelte: export let volume; and <input type='range' bind:value={volume} /> mismatches prop names. In parent: <Slider bind:value />
   In Slider.svelte: let value; and <input type='range' bind:value={value} /> misses binding variable in parent.

4. Final Answer:

   Parent binds volume to child's value; child exports value and binds input value. -> Option B

5. Quick Check:

   Matching bind names and two-way input binding = In parent: <Slider bind:value={volume} />
   In Slider.svelte: export let value; and <input type='range' bind:value={value} /> [OK]

Hint: Bind parent's variable to child's exported prop with same name [OK]

Common Mistakes:

• Mismatching prop names between parent and child
• Using one-way binding instead of bind:value
• Not exporting prop in child component