Declaring props with export let in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a prop named name in a Svelte component.

Svelte

export [1] name;

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

Alet

Bvar

Cconst

Dfunction

Attempts:

3 left

💡 Hint

Common Mistakes

Using var or const instead of let.

Forgetting to use export keyword.

In Svelte, you declare props using export let. This makes name a property that can be passed from a parent component.

2fill in blank

medium

Complete the code to declare a prop named age with a default value of 30.

Svelte

export let age = [1];

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

A30

Bnull

C"30"

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string "30" instead of number 30.

Leaving the value undefined.

Assigning 30 as the default value means if no value is passed, age will be 30.

3fill in blank

hard

Fix the error in the code to properly declare a prop named title.

Svelte

export let [1] = 'Hello';

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

A1title

Btitle

CTitle

Dtitle!

Attempts:

3 left

💡 Hint

Common Mistakes

Starting variable names with uppercase letters or numbers.

Including special characters like exclamation marks.

Variable names must start with a letter or underscore and contain no special characters. title is valid.

4fill in blank

hard

Fill both blanks to declare two props: count with default 0 and enabled with default true.

Svelte

export let [1] = 0;
export let [2] = true;

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

Acount

Benable

Cenabled

Dcounter

Attempts:

3 left

💡 Hint

Common Mistakes

Using enable instead of enabled.

Using counter instead of count.

The props are named count and enabled. The defaults are 0 and true respectively.

5fill in blank

hard

Fill all three blanks to declare props firstName, lastName, and age with default values "John", "Doe", and 25 respectively.

Svelte

export let [1] = "John";
export let [2] = "Doe";
export let [3] = 25;

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

AfirstName

Bage

ClastName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of prop names.

Using incorrect default values or types.

The props must be declared with the exact names and default values as specified.