Why props pass data to children in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass the prop name from parent to child component.

Svelte

<ChildComponent [1]={name} />

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

Aname

Bprop

Cbind

Dlet

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bind' instead of the prop name.

Trying to use 'let' or 'prop' which are not valid here.

In Svelte, to pass data to a child component, you use the prop name as an attribute. Here, name is passed as a prop.

2fill in blank

medium

Complete the child component code to receive the prop title.

Svelte

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

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

Avar

Bconst

Clet

Dexport

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'const' which makes the prop read-only.

Using 'var' which is outdated in Svelte.

Using 'export' alone without 'let'.

In Svelte, props are declared with export let to receive data from the parent.

3fill in blank

hard

Fix the error in passing a number prop count to the child component.

Svelte

<Child count=[1] />

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

A"5"

B5

C'5'

D{5}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing numbers as strings like "5" or '5'.

Using curly braces inside the attribute which is invalid in Svelte.

To pass a number prop in Svelte, use the number directly without quotes or braces.

4fill in blank

hard

Fill both blanks to correctly pass and receive a prop message.

Svelte

Parent: <Child [1]={message} />
Child: <script> export [2] message; </script>

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

Amessage

Blet

Cconst

Dbind

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bind' in the parent which is for two-way binding.

Using 'const' in the child which makes the prop read-only.

The parent passes the prop as an attribute named message. The child receives it by declaring export let message.

5fill in blank

hard

Fill all three blanks to create a prop user passed from parent to child and used in child markup.

Svelte

Parent: <Child [1]={user} />
Child: <script> export [2] user; </script>
Child markup: <p>Hello, [3]!</p>

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

Auser

Blet

Cuser.name

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'const' instead of 'let' in the child.

Trying to display just 'user' instead of 'user.name' in markup.

Passing the wrong attribute name in the parent.

The parent passes the user prop. The child exports it with let. The child uses user.name to show the user's name.