Default prop values in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a default value for the name prop.

Svelte

<script>
  export let name = [1];
</script>

<p>Hello, {name}!</p>

Drag options to blanks, or click blank then click option'

A"Guest"

Bnull

Cundefined

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the default value undefined or null causes the prop to be empty.

Not using quotes for string default values causes errors.

In Svelte, you set default prop values by assigning them during export. Here, name defaults to "Guest" if no value is passed.

2fill in blank

medium

Complete the code to set a default number value for the count prop.

Svelte

<script>
  export let count = [1];
</script>

<p>Count: {count}</p>

Drag options to blanks, or click blank then click option'

Aundefined

Bnull

C"10"

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around numbers makes them strings.

Leaving the default value undefined results in an empty prop.

Number default values are assigned without quotes. Here, count defaults to 10.

3fill in blank

hard

Fix the error in setting a default boolean prop isActive.

Svelte

<script>
  export let isActive = [1];
</script>

<p>Active: {isActive ? 'Yes' : 'No'}</p>

Drag options to blanks, or click blank then click option'

A1

B"true"

Ctrue

Dyes

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings like "true" instead of boolean true.

Using numbers like 1 instead of boolean true.

Boolean default values must be the boolean true or false, not strings or numbers.

4fill in blank

hard

Fill both blanks to set default values for title and visible props.

Svelte

<script>
  export let title = [1];
  export let visible = [2];
</script>

{#if visible}
  <h1>{title}</h1>
{/if}

Drag options to blanks, or click blank then click option'

A"Welcome"

Bfalse

Ctrue

D"Hello"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around booleans.

Not assigning default values causes props to be undefined.

The title prop defaults to the string "Welcome" and visible defaults to boolean true so the heading shows by default.

5fill in blank

hard

Fill all three blanks to set default values for user, age, and isMember props.

Svelte

<script>
  export let user = [1];
  export let age = [2];
  export let isMember = [3];
</script>

<p>{user} is {age} years old and membership is {isMember ? 'active' : 'inactive'}.</p>

Drag options to blanks, or click blank then click option'

A"Alice"

B30

Cfalse

D"Bob"

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings for booleans.

Not quoting string defaults.

Using quotes around numbers.

The user defaults to "Bob", age to 30, and isMember to boolean false. This sets clear default info.