Readonly props in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a readonly prop in a Svelte component.

Svelte

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

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

Areadonly

Bconst

Cimmutable

Dlet

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'const' instead of 'readonly' for props.

Trying to use 'immutable' which is not valid in Svelte.

In Svelte, you mark a prop as readonly by adding the readonly keyword after let.

2fill in blank

medium

Complete the code to prevent modification of a prop inside the component.

Svelte

<script>
  export let count[1];

  // Trying to change count here will cause an error
</script>

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

Aconst

Breadonly

Clet

Dvar

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'const' which is not valid for exported props in Svelte.

Using 'var' which is outdated and not recommended.

Using readonly after let makes the prop immutable inside the component.

3fill in blank

hard

Fix the error in the code by making the prop readonly.

Svelte

<script>
  export let message[1];

  message = 'New message'; // This should cause an error
</script>

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

Areadonly

Bconst

Clet

Dvar

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'const' which is not allowed for exported props.

Not adding any keyword and trying to reassign the prop.

Adding readonly after let prevents reassignment of the prop inside the component.

4fill in blank

hard

Fill both blanks to declare a readonly prop and use it in markup.

Svelte

<script>
  export let title[1];
</script>

<h1>[2]</h1>

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

Areadonly

Btitle

Cname

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'const' instead of 'readonly' for the prop.

Using a wrong variable name in the markup.

The prop is declared readonly with readonly. The markup uses the prop title to display it.

5fill in blank

hard

Fill all three blanks to declare multiple readonly props and use them in markup.

Svelte

<script>
  export let firstName[1];
  export let lastName[2];
</script>

<p>Hello, [3] {{lastName}}!</p>

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

Areadonly

Bconst

CfirstName

Dlet

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'const' or 'let' instead of 'readonly' for props.

Using a wrong variable name in the markup.

Both props are declared readonly with readonly. The markup uses firstName and lastName to greet the user.