Why props pass data to children in Svelte

Introduction

Props let parent components send information to their child components. This helps keep data organized and shared clearly.

When a parent component needs to show different text or images in a child component.

When you want to reuse a child component but with different data each time.

When you want to control how a child component looks or behaves from the parent.

When you want to keep your app organized by separating data and display.

When you want to update child components automatically when parent data changes.

Syntax

Svelte

<ChildComponent propName={value} />

<script>
  export let propName;
</script>

In Svelte, the parent passes data by adding attributes to the child component tag.

The child uses export let to declare which props it expects.

Examples

Parent sends a string "Hello" as a prop named message.

Svelte

<Child message="Hello" />

<script>
  export let message;
</script>

Parent sends a number 5 as a prop named count.

Svelte

<Child count={5} />

<script>
  export let count;
</script>

Parent sends an object userObject as a prop named user.

Svelte

<Child user={userObject} />

<script>
  export let user;
</script>

Sample Program

The parent component sends the greeting string to the child as a prop called message. The child shows this message inside a paragraph.

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let greeting = 'Hi there!';
</script>

<Child message={greeting} />


<!-- Child.svelte -->
<script>
  export let message;
</script>

<p>{message}</p>

Important Notes

Props are read-only inside the child component. To change data, update it in the parent.

Passing props keeps components simple and focused on their job.

Summary

Props let parents send data to children in Svelte.

Children declare props with export let.

This helps build reusable and organized components.

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