Textarea bindings in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when typing in this Svelte textarea?

Consider this Svelte component:

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

<textarea bind:value={text}></textarea>

<p>You typed: {text}</p>

What will be displayed in the paragraph after typing "hello" in the textarea?

Svelte

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

<textarea bind:value={text}></textarea>

<p>You typed: {text}</p>

A You typed: hello

B You typed:

C You typed: {text}

D You typed: undefined

💡 Hint

Think about what bind:value does in Svelte.

The bind:value directive connects the textarea's content with the text variable. When you type, text updates immediately, so the paragraph shows what you typed.

📝 Syntax

intermediate

Which option correctly binds a textarea value in Svelte?

Choose the correct Svelte syntax to bind a textarea's value to a variable comment.

A <textarea bind:value={comment}></textarea>

B <textarea value={comment} bind></textarea>

C <textarea bind={comment}></textarea>

D <textarea bind:value(comment)></textarea>

💡 Hint

Remember the syntax for two-way binding in Svelte uses bind:value.

Option A uses the correct syntax bind:value={comment}. Other options have syntax errors or invalid binding forms.

❓ state_output

advanced

What is the value of text after this input event?

Given this Svelte code:

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

<textarea bind:value={text}></textarea>

If the user deletes all text in the textarea, what is the value of text?

Svelte

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

<textarea bind:value={text}></textarea>

A null

B "" (empty string)

C undefined

D "start"

💡 Hint

Think about what happens when the textarea is cleared.

When the textarea is cleared, its value becomes an empty string, so text updates to "".

🔧 Debug

advanced

Why does this Svelte textarea not update the variable?

Look at this code snippet:

<script>
  let message = '';
</script>

<textarea value={message}></textarea>

<p>Message: {message}</p>

Typing in the textarea does not update message. Why?

Svelte

<script>
  let message = '';
</script>

<textarea value={message}></textarea>

<p>Message: {message}</p>

A Because the paragraph does not have a key to update.

B Because the variable message is not declared as reactive.

C Because the textarea uses value attribute instead of bind:value, so no two-way binding occurs.

D Because the textarea tag is self-closing which is invalid in Svelte.

💡 Hint

Check how Svelte handles input bindings.

Using value={message} sets the initial value but does not update message when typing. bind:value is needed for two-way binding.

🧠 Conceptual

expert

How does Svelte's bind:value on textarea differ from React's controlled component?

Compare Svelte's bind:value on a textarea with React's controlled textarea using value and onChange. Which statement is true?

A Both Svelte and React require manual event listeners to update the variable when typing.

B React's controlled textarea updates the variable automatically without needing onChange, unlike Svelte.

C Svelte does not support two-way binding on textarea, unlike React.

D Svelte's bind:value automatically syncs the variable and textarea without extra event handlers, while React requires explicit onChange handlers.

💡 Hint

Think about how each framework handles input state syncing.

Svelte's bind:value creates two-way binding automatically. React requires you to write onChange handlers to update state manually.