Component structure (frontmatter + template) in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Astro component?

Consider this Astro component code:

---
const greeting = 'Hello';
const name = 'World';
---
{greeting}, {name}!

What will this component render in the browser?

Astro

---
const greeting = 'Hello';
const name = 'World';
---
<h1>{greeting}, {name}!</h1>

A <h1>{greeting}, {name}!</h1>

B <h1>Hello, {name}!</h1>

C <h1>Hello World</h1>

D <h1>Hello, World!</h1>

💡 Hint

Remember that variables inside curly braces in Astro templates are replaced by their values.

The frontmatter defines greeting and name. The template uses curly braces to insert their values, so the output is <h1>Hello, World!</h1>.

📝 Syntax

intermediate

Which option correctly defines frontmatter in an Astro component?

Astro components use frontmatter to write JavaScript or TypeScript code. Which of these is the correct syntax for frontmatter?

A

---
const x = 5;
---

B

{{
const x = 5;
}}

C

<script>
const x = 5;
</script>

D

<!--
const x = 5;
-->

💡 Hint

Astro uses triple dashes to mark frontmatter.

Astro frontmatter is enclosed between --- lines at the top of the file.

🔧 Debug

advanced

Why does this Astro component fail to render correctly?

Look at this Astro component:

---
const message = 'Hi there!'
const len = message.length
---
{message}

It throws a syntax error. What is the cause?

Astro

---
const message = 'Hi there!'
const len = message.length
---
<p>{message}</p>

A Missing semicolon after the variable declaration in frontmatter

B Curly braces cannot be used inside <p> tags in Astro templates

C Frontmatter must be at the bottom of the file, not the top

D The string must use double quotes instead of single quotes

💡 Hint

Check JavaScript syntax rules inside frontmatter.

In Astro frontmatter, JavaScript code must follow normal syntax rules. Missing semicolons can cause errors depending on the parser.

❓ state_output

advanced

What is the output of this Astro component with a function in frontmatter?

Consider this Astro component:

---
function greet(name) {
  return `Hello, ${name}!`;
}
const user = 'Alice';
---
{greet(user)}

What will be rendered in the browser?

Astro

---
function greet(name) {
  return `Hello, ${name}!`;
}
const user = 'Alice';
---
<h2>{greet(user)}</h2>

A <h2>Hello, {user}!</h2>

B <h2>greet(user)</h2>

C <h2>Hello, Alice!</h2>

D <h2>Hello, Alice</h2>

💡 Hint

Functions in frontmatter can be called inside templates with curly braces.

The function greet returns a string using the passed name. The template calls greet(user) which returns Hello, Alice!.

🧠 Conceptual

expert

What happens if you place template code inside Astro frontmatter?

In Astro, what is the result of writing HTML tags inside the frontmatter section?

---
const title = '
Welcome
';
{title}
---

Astro

---
const title = '<h1>Welcome</h1>';
<div>{title}</div>
---

A The HTML inside the string is rendered as a heading inside the page

B Syntax error because HTML is not allowed inside frontmatter

C The <div> tag is ignored and only the string is used

D The component renders the literal string including tags as text

💡 Hint

Frontmatter is for JavaScript code only, not HTML markup.

Astro frontmatter must contain only JavaScript or TypeScript code. Writing HTML tags directly inside frontmatter causes a syntax error.

Practice

1. What is the purpose of the frontmatter section in an Astro component?

easy

A. To style the component with CSS

B. To write JavaScript code and define variables used in the template

C. To write HTML markup for the component

D. To import other components only

Solution

1. Step 1: Understand frontmatter role

   The frontmatter section is where you write JavaScript code, such as variables or functions, that the template can use.

2. Step 2: Differentiate from template

   The template part is for HTML markup, not code. Styling is done separately, not in frontmatter.

3. Final Answer:

   To write JavaScript code and define variables used in the template -> Option B

4. Quick Check:

   Frontmatter = JavaScript code [OK]

Hint: Frontmatter holds code; template holds HTML display [OK]

Common Mistakes:

• Confusing frontmatter with template HTML
• Thinking frontmatter is for CSS styling
• Believing frontmatter is only for imports

2. Which of the following is the correct way to start the frontmatter section in an Astro component?

easy

A. //

B. { }

C. /* */

D. ---

Solution

1. Step 1: Identify frontmatter syntax

   Astro uses triple dashes --- at the top and bottom to mark the frontmatter section.

2. Step 2: Compare options

   Curly braces, comments, or single slashes are not used to mark frontmatter.

3. Final Answer:

   --- -> Option D

4. Quick Check:

   Frontmatter starts with --- [OK]

Hint: Frontmatter always starts and ends with --- [OK]

Common Mistakes:

• Using curly braces to start frontmatter
• Confusing comments with frontmatter markers
• Omitting the closing ---

3. Given this Astro component code, what will be displayed when rendered?

---
const greeting = "Hello, Astro!";
---
{greeting}

medium

A. {greeting}

B.

C. Hello, Astro!

D. Error: greeting is undefined

Solution

1. Step 1: Understand variable usage

   The variable greeting is defined in frontmatter with value "Hello, Astro!".

2. Step 2: Template interpolation

   The template uses curly braces {greeting} to insert the variable's value into the HTML.

3. Final Answer:

   <h1>Hello, Astro!</h1> -> Option C

4. Quick Check:

   Curly braces insert variable value [OK]

Hint: Curly braces show frontmatter variables in template [OK]

Common Mistakes:

• Thinking curly braces show as text literally
• Assuming variable is undefined without frontmatter
• Forgetting to close frontmatter with ---

4. What is wrong with this Astro component code?

---
const name = "Astro";

Hello, {name}!
---

medium

A. The template HTML is inside the frontmatter section

B. The variable name is not defined

C. Curly braces cannot be used in Astro templates

D. Missing closing tag for <h1>

Solution

1. Step 1: Identify frontmatter boundaries

   Frontmatter is only for JavaScript code and must be enclosed between --- lines.

2. Step 2: Check template placement

   The HTML template must be outside the frontmatter. Here, the <h1> is inside frontmatter, causing an error.

3. Final Answer:

   The template HTML is inside the frontmatter section -> Option A

4. Quick Check:

   Template must be outside frontmatter [OK]

Hint: Keep HTML outside --- frontmatter --- [OK]

Common Mistakes:

• Placing HTML inside frontmatter
• Forgetting to close frontmatter with ---
• Misusing curly braces syntax

5. How can you display a list of items defined in frontmatter inside the template in Astro? Choose the correct code snippet to render a list of fruits stored in fruits array.

hard

A. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{fruits.map(fruit => {fruit})}

B. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{for fruit in fruits}
{fruit}
{/for}

C. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{fruits.forEach(fruit => {fruit})}

D. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{fruits.map(fruit => "" + fruit + "")}

Solution

1. Step 1: Understand how to loop in Astro template

   Astro templates use JavaScript expressions inside curly braces. map() returns an array of JSX elements to render.

2. Step 2: Check each option's correctness

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {fruits.map(fruit => 
   {fruit}
   )}
   

   uses map() correctly to return <li> elements.

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {for fruit in fruits}
       
   {fruit}
     {/for}
   

   uses invalid syntax.

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {fruits.forEach(fruit => 
   {fruit}
   )}
   

   uses forEach() which returns undefined.

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {fruits.map(fruit => "
   " + fruit + "
   ")}
   

   returns strings, not JSX elements.

3. Final Answer:

   Option A correctly renders the list using map() -> Option A

4. Quick Check:

   Use map() to render lists in Astro templates [OK]

Hint: Use map() inside curly braces to render lists [OK]

Common Mistakes:

• Using forEach instead of map for rendering
• Trying template loops with invalid syntax
• Returning strings instead of JSX elements