How do I use an astro component in a template literal? | Astro Lounge | Page 1

Hi @stone ginkgo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Astro doesn't support using components directly inside template literals. Instead, you should use the Astro component syntax within the HTML part of your Astro file.

Here's how you can use the TheFlameUpgrades component in your Astro file:

---
import TheFlameUpgrades from "@components/TheFlame/TheFlameUpgrades.astro";
let entryData = { upgrades: true }; // assuming you have entryData defined somewhere
---

{entryData.upgrades ? 
  <div class="more-items">
    <div class="title">{t("view-upgrades")}:</div>
    <TheFlameUpgrades flameAltar={/* pass your props here */} />
  </div>
: ""}

In this example, the TheFlameUpgrades component is used directly in the HTML part of the Astro file. The ternary operator (? :) is used to conditionally render the div containing the TheFlameUpgrades component based on the entryData.upgrades value.

Remember, in Astro, you can use JavaScript expressions directly in your HTML, similar to JSX. However, these expressions are not reactive and will only run once during the rendering step (source (https://docs.astro.build/en/basics/astro-syntax#_top)).

#How do I use an astro component in a template literal?

Remember, in Astro, you can use JavaScript expressions directly in your HTML, similar to JSX. However, these expressions are not reactive and will only run once during the rendering step (source (https://docs.astro.build/en/basics/astro-syntax#_top)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: