Default prop values in Svelte - Mini Project: Build & Apply

Default prop values in Svelte

📖 Scenario: You are building a simple Svelte component to display a user's profile card. Sometimes the user might not provide all the information, so you want to set default values for some props.

🎯 Goal: Create a Svelte component called UserProfile.svelte that accepts props for name, age, and location. Set default values for age and location so the component still shows meaningful info if those props are not passed.

📋 What You'll Learn

Create a name prop without a default value

Create age and location props with default values

Render the props inside the component

Use Svelte syntax for default prop values

💡 Why This Matters

🌍 Real World

Setting default prop values is common in UI components to ensure they display useful information even when some data is missing.

💼 Career

Knowing how to handle default props is essential for frontend developers working with Svelte or similar frameworks to build robust, reusable components.

1

Create the name prop

In UserProfile.svelte, create a name prop using export let name; without assigning a default value.

Svelte

// Your code here


  // Create the name prop here

Need a hint?

Use export let name; to declare a prop without a default value.

2

Add default values for age and location props

Add two more props in the <script> block: export let age = 30; and export let location = 'Unknown'; to set default values.

Svelte

  export let name;
  // Add age and location props with default values here

Need a hint?

Assign default values directly when declaring the props.

3

Render the props in the component

Below the <script> block, add HTML to display the name, age, and location props inside <p> tags.

Svelte

  export let name;
  export let age = 30;
  export let location = 'Unknown';

Need a hint?

Use curly braces {} to insert prop values inside HTML.

4

Complete the component with default prop values

Ensure the full component code includes the <script> block with all three props and the HTML rendering the props as paragraphs.

Svelte

  export let name;
  export let age = 30;
  export let location = 'Unknown';


Name: {name}
Age: {age}
Location: {location}

Need a hint?

Check that all props and HTML are present exactly as specified.