svelte:component for dynamic components - Mini Project: Build & Apply

Dynamic Component Rendering with <code>svelte:component</code>

📖 Scenario: You are building a simple Svelte app that shows different greeting messages depending on the user's mood. Each mood has its own small component that displays a unique message.

🎯 Goal: Build a Svelte app that uses svelte:component to dynamically render one of three greeting components based on a selected mood.

📋 What You'll Learn

Create three Svelte components named Happy.svelte, Sad.svelte, and Excited.svelte with distinct greeting messages.

Create a main App.svelte file that holds the current mood in a variable called currentMood.

Use a configuration variable components that maps mood names to their respective components.

Use svelte:component in App.svelte to render the component matching currentMood.

Add buttons to change currentMood dynamically.

💡 Why This Matters

🌍 Real World

Dynamic component rendering is useful in apps where the UI changes based on user choices or data, such as dashboards, forms, or multi-step wizards.

💼 Career

Understanding <code>svelte:component</code> helps you build flexible and maintainable Svelte apps that adapt to user input or external data, a common requirement in frontend development jobs.

1

Create the greeting components

Create three Svelte components named Happy.svelte, Sad.svelte, and Excited.svelte. Each component should export a default component that renders a <h2> with these exact texts respectively: "I am feeling happy!", "I am feeling sad.", and "I am feeling excited!".

Svelte

// Create Happy.svelte
// Create Sad.svelte
// Create Excited.svelte

 with the exact text -->

Hint

Each component is a simple Svelte file with an <h2> tag containing the exact text.

2

Set up the mood state and components map in App.svelte

In App.svelte, import the three components Happy, Sad, and Excited. Create a variable called currentMood and set it to the string "Happy". Then create a constant object called components that maps the strings "Happy", "Sad", and "Excited" to their respective imported components.

Svelte

// Import Happy, Sad, Excited components
// Create variable currentMood = "Happy"
// Create constant components mapping moods to components

// Your code here

Hint

Use import statements for each component. Then create currentMood as a string and components as an object mapping mood names to components.

3

Render the dynamic component using svelte:component

In App.svelte, use the <svelte:component> tag to render the component that matches the current mood. Use the this attribute with the value components[currentMood].

Svelte

  import Happy from './Happy.svelte';
  import Sad from './Sad.svelte';
  import Excited from './Excited.svelte';

  let currentMood = "Happy";

  const components = {
    Happy: Happy,
    Sad: Sad,
    Excited: Excited
  };

Hint

Use <svelte:component this={components[currentMood]} /> to render the chosen component.

4

Add buttons to change the mood dynamically

Below the dynamic component in App.svelte, add three <button> elements labeled exactly Happy, Sad, and Excited. Each button should have an on:click event that sets currentMood to the respective mood string.

Svelte

  import Happy from './Happy.svelte';
  import Sad from './Sad.svelte';
  import Excited from './Excited.svelte';

  let currentMood = "Happy";

  const components = {
    Happy: Happy,
    Sad: Sad,
    Excited: Excited
  };

Hint

Add three buttons with on:click handlers that update currentMood to the exact mood strings.

Practice

1. What does the svelte:component tag do in Svelte?

easy

A. It imports components from external libraries.

B. It creates a new Svelte component file.

C. It renders a component dynamically based on a variable.

D. It styles components with CSS.

Solution

1. Step 1: Understand the purpose of svelte:component

   This tag is used to render different components dynamically depending on a variable's value.

2. Step 2: Compare with other options

   Creating files, styling, or importing are unrelated to svelte:component.

3. Final Answer:

   It renders a component dynamically based on a variable. -> Option C

4. Quick Check:

   svelte:component = dynamic rendering [OK]

Hint: Remember: svelte:component means dynamic component rendering [OK]

Common Mistakes:

• Thinking it creates new component files
• Confusing it with CSS styling
• Assuming it imports components

2. Which of the following is the correct syntax to render a dynamic component stored in variable CurrentComp?

easy

A. <component this={CurrentComp} />

B. <svelte:component this={CurrentComp} />

C. <svelte:component src={CurrentComp} />

D. <Component this={CurrentComp} />

Solution

1. Step 1: Recall correct tag and attribute

   The correct tag is svelte:component and the attribute to specify the component is this.

2. Step 2: Check each option

   <svelte:component this={CurrentComp} /> uses correct tag and attribute syntax. Others use wrong tags or attributes.

3. Final Answer:

   <svelte:component this={CurrentComp} /> -> Option B

4. Quick Check:

   Correct tag and this attribute = <svelte:component this={CurrentComp} /> [OK]

Hint: Use svelte:component this={variable} for dynamic components [OK]

Common Mistakes:

• Using component instead of svelte:component
• Using src instead of this
• Capitalizing tags incorrectly

3. Given the code:

  <script>
    import A from './A.svelte';
    import B from './B.svelte';
    let comp = A;
  </script>

  <svelte:component this={comp} />

  <button on:click={() => comp = B}>Switch</button>

What happens when the button is clicked?

medium

A. The displayed component switches from A to B.

B. Nothing changes because comp is not reactive.

C. An error occurs because components cannot be switched dynamically.

D. Both components A and B render at the same time.

Solution

1. Step 1: Understand the initial rendering

   The variable comp starts as component A, so A renders initially.

2. Step 2: Analyze the button click

   Clicking the button sets comp to B, which triggers Svelte to render component B dynamically.

3. Final Answer:

   The displayed component switches from A to B. -> Option A

4. Quick Check:

   Dynamic this changes component = The displayed component switches from A to B. [OK]

Hint: Changing this variable updates the rendered component [OK]

Common Mistakes:

• Thinking dynamic components can't switch
• Assuming comp is not reactive
• Expecting both components to render simultaneously

4. What is wrong with this code snippet?

<script>
  import X from './X.svelte';
  let comp = 'X';
</script>

<svelte:component this={comp} />

medium

A. You cannot use variables inside this.

B. The import statement is incorrect.

C. The svelte:component tag must be self-closing.

D. The variable comp should hold the component, not a string.

Solution

1. Step 1: Check the type of comp

   The variable comp is assigned the string 'X', but it should hold the imported component itself.

2. Step 2: Understand this attribute requirements

   this expects a component reference, not a string name.

3. Final Answer:

   The variable comp should hold the component, not a string. -> Option D

4. Quick Check:

   this needs component, not string [OK]

Hint: Assign component imports, not strings, to this [OK]

Common Mistakes:

• Assigning component name as string
• Thinking svelte:component can't be self-closing
• Believing variables can't be used in this

5. You want to render a dynamic component with props. Given components Cat and Dog both accept a name prop, how do you pass name="Buddy" to the dynamic component stored in petComp?

hard

A. <svelte:component this={petComp} name="Buddy" />

B. <svelte:component this={petComp} {name}="Buddy" />

C. <svelte:component this={petComp} props={{name: 'Buddy'}} />

D. <svelte:component this={petComp} bind:name="Buddy" />

Solution

1. Step 1: Recall how to pass props to components

   Props are passed as attributes directly on the component tag, including svelte:component.

2. Step 2: Check each option's syntax

   <svelte:component this={petComp} name="Buddy" /> correctly passes name="Buddy". <svelte:component this={petComp} {name}="Buddy" /> uses invalid syntax. <svelte:component this={petComp} props={{name: 'Buddy'}} /> tries to pass props as an object, which is not supported. <svelte:component this={petComp} bind:name="Buddy" /> uses bind: incorrectly.

3. Final Answer:

   <svelte:component this={petComp} name="Buddy" /> -> Option A

4. Quick Check:

   Pass props as attributes on svelte:component [OK]

Hint: Pass props like normal attributes on svelte:component [OK]

Common Mistakes:

• Trying to pass props as an object
• Using bind: incorrectly
• Using curly braces around prop name with value