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.