Why props pass data to children in Svelte - See It in Action

Why props pass data to children in Svelte

📖 Scenario: You are building a simple Svelte app that shows a greeting message. The main component will pass the name to a child component using props.

🎯 Goal: Learn how to pass data from a parent component to a child component using props in Svelte.

📋 What You'll Learn

Create a parent component with a variable userName set to 'Alice'

Create a child component that accepts a prop called name

Pass the userName from the parent to the child using props

Display the greeting message in the child component using the passed prop

💡 Why This Matters

🌍 Real World

Passing data with props is how components share information in real Svelte apps, like sending user info or settings from a main page to smaller parts.

💼 Career

Understanding props is essential for building interactive, modular web apps with Svelte, a popular modern framework used in many companies.

1

Create the parent component with a userName variable

In the parent component, create a variable called userName and set it to the string 'Alice'.

Svelte

# Create a variable called userName and set it to 'Alice'

Hint

Use let userName = 'Alice'; to create the variable.

2

Create a child component that accepts a name prop

Create a new Svelte component file named Child.svelte. Inside it, declare a prop called name using export let name;. Then add a paragraph that says Hello, {name}!.

Svelte

let userName = 'Alice';

Hint

Use export let name; to declare the prop in Child.svelte.

3

Pass userName from parent to child using props

In the parent component, import Child.svelte. Then add the <Child /> component and pass the userName variable as the name prop like this: <Child name={userName} />.

Svelte

let userName = 'Alice';

import Child from './Child.svelte';

Hint

Use <Child name={userName} /> to pass the prop.

4

Complete the app to display the greeting message

Make sure the parent component renders the <Child /> component with the name prop. This will show the greeting message Hello, Alice! on the page.

Svelte

let userName = 'Alice';

import Child from './Child.svelte';

Hint

The app is complete when the child component receives the prop and displays the message.

Practice

1. Why do we use props to pass data from a parent component to a child component in Svelte?

easy

A. To prevent the parent from updating its own data

B. To make the child component run its own independent code

C. To allow the child component to receive and use data from the parent

D. To stop the child component from rendering

Solution

1. Step 1: Understand the role of props in Svelte

   Props are used to send data from a parent to a child component so the child can use that data.

2. Step 2: Identify the purpose of passing data

   Passing data allows the child to display or work with information given by the parent, making components reusable and connected.

3. Final Answer:

   To allow the child component to receive and use data from the parent -> Option C

4. Quick Check:

   Props pass data to children = C [OK]

Hint: Props send data down from parent to child components [OK]

Common Mistakes:

• Thinking props control child component behavior independently
• Believing props stop parent data updates
• Assuming props prevent child rendering

2. Which of the following is the correct way to declare a prop named title in a Svelte child component?

easy

A. export let title;

B. const title = prop;

C. prop title;

D. let title;

Solution

1. Step 1: Recall Svelte prop declaration syntax

   In Svelte, child components declare props using export let to receive data from parents.

2. Step 2: Match the correct syntax

   The correct syntax is export let title;, which makes title a prop.

3. Final Answer:

   export let title; -> Option A

4. Quick Check:

   Props declared with export let = D [OK]

Hint: Use 'export let' to declare props in child components [OK]

Common Mistakes:

• Forgetting to use 'export' keyword
• Using 'prop' keyword which doesn't exist in Svelte
• Declaring props without export so they are not accessible

3. Given the parent component code:

<ChildComponent title="Hello" />

and the child component code:

export let title;
<h1>{title} World</h1>

What will be rendered on the page?

medium

A. {title} World

B. Hello World

C. World

D. Nothing will render due to error

Solution

1. Step 1: Understand prop passing from parent to child

   The parent passes the string "Hello" as the prop title to the child component.

2. Step 2: Check how the child uses the prop

   The child declares export let title; and uses it inside an <h1> tag with additional text " World".

3. Final Answer:

   <h1>Hello World</h1> -> Option B

4. Quick Check:

   Prop value used in child = A [OK]

Hint: Child shows parent's prop value inside its template [OK]

Common Mistakes:

• Expecting literal {title} text instead of prop value
• Forgetting to export the prop in child
• Assuming no output if prop is missing

4. What is wrong with this child component code if the parent passes a prop name?

let name;
<p>Hello {name}</p>

medium

A. The let keyword should be const

B. The {name} syntax is incorrect

C. The child component cannot receive props at all

D. The prop name is not declared with export let

Solution

1. Step 1: Check prop declaration in child component

   The child declares let name; but does not use export, so it won't receive the prop from the parent.

2. Step 2: Understand Svelte prop rules

   Props must be declared with export let to be accessible from the parent component.

3. Final Answer:

   The prop name is not declared with export let -> Option D

4. Quick Check:

   Missing export let for prop = B [OK]

Hint: Always use 'export let' to receive props in child [OK]

Common Mistakes:

• Using let without export for props
• Thinking const is required for props
• Believing child can't receive props without special syntax

5. You want to create a reusable Button component that changes its label based on a prop called text. Which approach correctly uses props to achieve this in Svelte?

hard

A. export let text;
<button>{text}</button>

B. let text = 'Click me';
<button>{text}</button>

C. export const text = 'Click me';
<button>{text}</button>

D. function Button(text) {
return `${text}`;
}

Solution

1. Step 1: Identify how to declare a prop in Svelte

   Props must be declared with export let to receive data from the parent.

2. Step 2: Check which option uses the prop correctly in the template

   export let text;
   <button>{text}</button>

   declares export let text; and uses {text} inside the button, making it reusable with different labels.

3. Final Answer:

   export let text; <button>{text}</button> -> Option A

4. Quick Check:

   Reusable button label via prop = A [OK]

Hint: Declare props with export let and use inside template [OK]

Common Mistakes:

• Setting default text without export to receive prop
• Using const instead of let for props
• Trying to create components as plain functions