Component expressions and conditionals in Astro - Mini Project: Build & Apply

Component expressions and conditionals in Astro

📖 Scenario: You are building a simple Astro component that shows a greeting message. The message changes based on the time of day.

🎯 Goal: Create an Astro component that uses expressions and conditionals to display a greeting: "Good morning", "Good afternoon", or "Good evening" depending on the hour.

📋 What You'll Learn

Create a variable hour with a number representing the current hour (0-23).

Create a variable greeting that will hold the greeting message.

Use a conditional expression to set greeting based on hour: morning if before 12, afternoon if before 18, else evening.

Render the greeting inside an <h1> tag in the component.

💡 Why This Matters

🌍 Real World

Dynamic greetings are common on websites to personalize user experience based on time or other data.

💼 Career

Understanding how to use expressions and conditionals in components is essential for building interactive and dynamic web pages with modern frameworks like Astro.

1

Set up the hour variable

Create a variable called hour and set it to the number 14 inside the frontmatter script of the Astro component.

Astro

---
const hour = 14
---

Hint

Use const hour = 14 inside the frontmatter (between the triple dashes).

2

Add the greeting variable

Add a variable called greeting inside the frontmatter script and set it to an empty string ''.

Astro

---
const hour = 14
const greeting = ''
---

Hint

Declare const greeting = '' inside the frontmatter.

3

Set greeting using conditional expressions

Use a conditional expression to set greeting to 'Good morning' if hour < 12, 'Good afternoon' if hour < 18, else 'Good evening'. Replace the previous greeting declaration with this logic.

Astro

---
const hour = 14
const greeting = hour 

Hint

Use nested ternary operators to assign greeting based on hour.

4

Render the greeting in the component

Insert the {greeting} expression inside the <h1> tag to display the greeting message.

Astro

---
const hour = 14
const greeting = hour {greeting}

Hint

Use curly braces {} to insert the greeting variable inside the <h1> tag.

Practice

1. In Astro components, what does the expression {condition && <Component />} do?

easy

A. It causes a syntax error in Astro components.

B. It always shows <Component />, ignoring condition.

C. It shows <Component /> only if condition is false.

D. It shows <Component /> only if condition is true.

Solution

1. Step 1: Understand logical AND in Astro expressions

   The expression {condition && <Component />} uses JavaScript's logical AND. It returns the component only if condition is true.

2. Step 2: Behavior when condition is false

   If condition is false, the whole expression returns false, so nothing renders.

3. Final Answer:

   It shows <Component /> only if condition is true. -> Option D

4. Quick Check:

   Logical AND shows component if true [OK]

Hint: Logical AND shows component only when condition is true [OK]

Common Mistakes:

• Thinking it always shows the component
• Confusing && with || operator
• Assuming it shows component when condition is false

2. Which of the following is the correct syntax for a ternary conditional expression in an Astro component?

easy

A. {condition ? <A /> : <B />}

B. {condition if <A /> else <B />}

C. {if condition then <A /> else <B />}

D. {condition ? <A /> <B />}

Solution

1. Step 1: Recall ternary syntax in JavaScript expressions

   The ternary operator uses condition ? exprIfTrue : exprIfFalse syntax, which works inside Astro expressions.

2. Step 2: Check each option's syntax

   {condition ? <A /> : <B />} matches the correct ternary syntax. Other options use invalid keywords like if/else or then, or miss the colon separator.

3. Final Answer:

   {condition ? <A /> : <B />} -> Option A

4. Quick Check:

   Ternary uses ? and : [OK]

Hint: Ternary always uses ? then : between expressions [OK]

Common Mistakes:

• Using if/else keywords inside JSX expressions
• Omitting the colon in ternary
• Confusing ternary with logical AND

3. Given this Astro component snippet:

{isLoggedIn ? 
Welcome back!
 : 
Please log in.
}

What will be rendered if isLoggedIn is false?

medium

A. Please log in.

B. Syntax error occurs

C. Nothing will render

D. Welcome back!

Solution

1. Step 1: Identify the condition value

   The variable isLoggedIn is false.

2. Step 2: Apply ternary conditional logic

   Since isLoggedIn is false, the expression returns the part after the colon: <p>Please log in.</p>.

3. Final Answer:

   <p>Please log in.</p> -> Option A

4. Quick Check:

   False condition shows else part [OK]

Hint: False condition shows expression after colon : [OK]

Common Mistakes:

• Choosing the true part instead of false
• Expecting no output when false
• Confusing syntax with runtime error

4. What is wrong with this Astro expression?

{user.isAdmin ? <AdminPanel />}

medium

A. It lacks an else part, causing a syntax error.

B. It will always render <AdminPanel /> regardless of user.isAdmin.

C. It may render nothing if user.isAdmin is false, but no error occurs.

D. It is missing curly braces around the expression.

Solution

1. Step 1: Analyze the ternary expression usage

   The expression {user.isAdmin ? <AdminPanel />} attempts a ternary operator but lacks the required : and else part, causing a syntax error.

2. Step 2: Understand ternary syntax requirements

   JavaScript/Astro requires full condition ? trueExpr : falseExpr. Missing parts cause parse errors; use && for optional render instead.

3. Final Answer:

   It may render nothing if user.isAdmin is false, but no error occurs. -> Option C

4. Quick Check:

   Missing colon in ternary = syntax error [OK]

Hint: Ternary requires ? true : false, missing parts error [OK]

Common Mistakes:

• Thinking it renders nothing if false like &&
• Assuming it always renders AdminPanel
• Confusing incomplete ternary with valid logical AND

5. You want to display a message in an Astro component that says "Hello, [name]!" if name is a non-empty string, otherwise show "Hello, guest!". Which expression correctly does this?

hard

A. {name && Hello, {name}! || Hello, guest!}

B. {name ? Hello, {name}! : Hello, guest!}

C. {name ? Hello, guest! : Hello, {name}!}

D. {name && Hello, guest! ? Hello, {name}! : null}

Solution

1. Step 1: Understand the condition needed

   We want to check if name is truthy (non-empty string) to show personalized greeting.

2. Step 2: Evaluate each option's logic

   {name ?

   Hello, {name}!

   :

   Hello, guest!

   } uses ternary correctly: if name is truthy, show "Hello, {name}!" else "Hello, guest!". {name &&

   Hello, {name}!

   ||

   Hello, guest!

   } mixes && and || incorrectly. {name ?

   Hello, guest!

   :

   Hello, {name}!

   } reverses greetings. {name &&

   Hello, guest!

   ?

   Hello, {name}!

   : null} has invalid syntax mixing && and ternary.

3. Final Answer:

   {name ? <p>Hello, {name}!</p> : <p>Hello, guest!</p>} -> Option B

4. Quick Check:

   Ternary with name ? true : false works [OK]

Hint: Use ternary: condition ? trueExpr : falseExpr [OK]

Common Mistakes:

• Mixing && and || operators incorrectly
• Reversing true and false parts
• Using invalid syntax combining operators