Component expressions and conditionals in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a greeting message using a component expression.

Astro

<h1>Hello, [1]!</h1>

Drag options to blanks, or click blank then click option'

A{userName}

BuserName

C"userName"

D<userName>

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the curly braces around the variable.

Using quotes around the variable name which makes it a string literal.

The expression inside curly braces {} is used to insert dynamic values in Astro components.

2fill in blank

medium

Complete the code to conditionally render a message only if the user is logged in.

Astro

{% if [1] %}
  <p>Welcome back!</p>
{% endif %}

Drag options to blanks, or click blank then click option'

AuserName

BisLoggedIn

Cfalse

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable that is not boolean.

Using a string or null which will not work as a condition.

The condition inside the if statement should be a boolean variable that indicates if the user is logged in.

3fill in blank

hard

Fix the error in the conditional expression to correctly show the user's name if it exists.

Astro

{% if [1] %}
  <p>Hello, {userName}!</p>
{% endif %}

Drag options to blanks, or click blank then click option'

AuserName !== undefined

BuserName = undefined

CuserName == null

DuserName === null

Attempts:

3 left

💡 Hint

Common Mistakes

Using assignment = instead of comparison !==.

Checking only for null but not undefined.

The condition should check if userName is not undefined to safely display it.

4fill in blank

hard

Fill both blanks to render a message if the user is an admin and the account is active.

Astro

{% if [1] && [2] %}
  <p>Admin access granted.</p>
{% endif %}

Drag options to blanks, or click blank then click option'

AuserRole === 'admin'

BuserRole === 'guest'

CaccountActive === true

DaccountActive === false

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong role like 'guest'.

Checking if account is false instead of true.

Both conditions must be true: user role is 'admin' and account is active.

5fill in blank

hard

Fill all three blanks to create a dictionary with keys as uppercase user names and values as their status if status is 'active'.

Astro

{
  [1]: [2] for user, status in users.items() if status [3] 'active'
}

Drag options to blanks, or click blank then click option'

Auser.toUpperCase()

Bstatus

C===

D==

Attempts:

3 left

💡 Hint

Common Mistakes

Using loose equality == instead of strict.

Not converting user name to uppercase.

The key is the uppercase user name, the value is the status, and the condition checks strict equality to 'active'.

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