Props and component composition in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Astro component render?

Consider this Astro component that receives props and composes another component. What will be the rendered output?

Astro

---
const { title } = Astro.props;
---
<h1>{title}</h1>
<Child message="Hello from parent" />

---
const { message } = Astro.props;
---
<p>{message}</p>

A <h1>title</h1><p>message</p>

B <h1>Welcome</h1><p>Hello from parent</p>

C <h1></h1><p>Hello from parent</p>

D <h1>Welcome</h1><p></p>

💡 Hint

Remember how props are passed and used inside Astro components.

The parent component receives a prop title and passes a fixed string prop message to the child. The output shows the title inside <h1> and the message inside <p>.

❓ state_output

intermediate

What is the value of the prop inside the nested component?

Given this Astro component structure, what will the nested component receive as its info prop?

Astro

---
const { data } = Astro.props;
---
<Wrapper info={data} />

---
const { info } = Astro.props;
---
<Nested info={info + ' updated'} />

---
const { info } = Astro.props;
---
<p>{info}</p>

A undefined updated

B Original data

C data updated

D Original data updated

💡 Hint

Check how the info prop is modified before passing to the nested component.

The data prop is passed as info to Wrapper. Then Wrapper appends ' updated' before passing it to Nested. So the nested component receives the original data string plus ' updated'.

📝 Syntax

advanced

Which option correctly passes multiple props to a child component in Astro?

Choose the correct syntax to pass name and age props to a child component in Astro.

Astro

---
const name = 'Alice';
const age = 30;
---
<Child ??? />

A name={name} age={age}

B name: {name}, age: {age}

C name={name}, age={age}

D name={name} age={age};

💡 Hint

Remember how to pass multiple props without commas or semicolons in JSX-like syntax.

In Astro, props are passed like JSX attributes separated by spaces without commas or semicolons. Option A is correct syntax.

🔧 Debug

advanced

Why does this Astro component fail to render the child prop?

Look at this Astro component code. Why does the child component not display the passed text prop?

Astro

---
const { text } = Astro.props;
---
<Child text="{text}" />

---
const { text } = Astro.props;
---
<p>{text}</p>

A The Child component should use double braces to access props

B The Child component is missing a return statement

C The text prop is passed as a string literal including braces, not the variable value

D Astro.props cannot be destructured

💡 Hint

Check how props are passed inside JSX-like syntax in Astro.

Using quotes around {text} passes the literal string '{text}' instead of the variable value. Remove quotes to pass the variable.

🧠 Conceptual

expert

How does Astro handle prop forwarding in nested components?

In Astro, if a parent component receives props and passes them down to multiple nested components, how are props forwarded and merged?

Choose the most accurate description.

A Props must be explicitly passed at each level; Astro does not auto-forward props

B Astro automatically forwards all props from parent to all nested components

C Props are merged automatically if nested components declare matching prop names

D Astro uses a global context to share props without passing them explicitly

💡 Hint

Think about how data flows in component trees in Astro.

Astro requires explicit prop passing at each component level. It does not auto-forward or merge props automatically. This keeps data flow clear and predictable.

Practice

1. What is the main purpose of props in Astro components?

easy

A. To pass data from a parent component to a child component

B. To style components with CSS

C. To handle user events like clicks

D. To fetch data from a server

Solution

1. Step 1: Understand the role of props

   Props are used to send data from a parent component to a child component in Astro.

2. Step 2: Differentiate from other uses

   Props are not for styling, event handling, or data fetching directly; those are separate concerns.

3. Final Answer:

   To pass data from a parent component to a child component -> Option A

4. Quick Check:

   Props = data passing [OK]

Hint: Props always send data down from parent to child [OK]

Common Mistakes:

• Thinking props handle events
• Confusing props with CSS styling
• Assuming props fetch data

2. Which of the following is the correct way to pass a prop named title with value "Hello" to a child component <MyComponent /> in Astro?

easy

A. <MyComponent {title: "Hello"} />

B. <MyComponent title=>Hello</MyComponent>

C. <MyComponent title={Hello} />

D. <MyComponent title="Hello" />

Solution

1. Step 1: Recall Astro prop syntax

   Props are passed as HTML-like attributes with string values in quotes.

2. Step 2: Check each option

   <MyComponent title="Hello" /> uses correct syntax: title="Hello". <MyComponent {title: "Hello"} /> uses object syntax which is invalid. <MyComponent title={Hello} /> misses quotes around Hello. <MyComponent title=>Hello</MyComponent> uses children syntax which is not how props are passed.

3. Final Answer:

   <MyComponent title="Hello" /> -> Option D

4. Quick Check:

   Props = attribute="value" [OK]

Hint: Props look like HTML attributes with quoted values [OK]

Common Mistakes:

• Using curly braces incorrectly
• Forgetting quotes around string values
• Trying to pass props as children

3. Given this Astro component code:

---
const { message } = Astro.props;
---
<div>{message}</div>

What will be rendered if the parent uses <Child message="Hi!" />?

medium

A. <div>{message}</div>

B. <div>Hi!</div>

C. An error because message is not defined

D. <div></div>

Solution

1. Step 1: Understand prop extraction

   The component extracts message from Astro.props, which receives the prop from the parent.

2. Step 2: Check rendering output

   The JSX-like syntax outputs the value of message inside a <div>, so it renders <div>Hi!</div>.

3. Final Answer:

   <div>Hi!</div> -> Option B

4. Quick Check:

   Prop value = rendered content [OK]

Hint: Props become variables inside the component [OK]

Common Mistakes:

• Thinking JSX shows literal {message}
• Assuming missing prop causes error
• Expecting empty div if prop exists

4. Identify the error in this Astro component usage:

<ChildComponent message=Hello />

medium

A. Props must be passed as children, not attributes

B. ChildComponent cannot receive props

C. Missing quotes around the string Hello

D. The component tag must be self-closing with a semicolon

Solution

1. Step 1: Check prop syntax

   Props with string values must be enclosed in quotes in Astro.

2. Step 2: Identify the error

   The code passes message=Hello without quotes, causing a syntax error.

3. Final Answer:

   Missing quotes around the string Hello -> Option C

4. Quick Check:

   String props need quotes [OK]

Hint: Always quote string prop values [OK]

Common Mistakes:

• Omitting quotes around strings
• Thinking props are passed as children
• Adding unnecessary semicolons

5. You want to create a parent component that renders a list of Item components, each receiving a name prop from an array ['Apple', 'Banana', 'Cherry']. Which Astro code correctly composes these components?

hard

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

B. ---
const fruits = ['Apple', 'Banana', 'Cherry'];
---
<Item name="fruits" />

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

D. ---
const fruits = ['Apple', 'Banana', 'Cherry'];
---
<Item>{fruits}</Item>

Solution

1. Step 1: Understand how to loop in Astro

   Astro supports JavaScript expressions inside braces, so map is used to create multiple components.

2. Step 2: Check each option's correctness

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

   correctly maps over fruits and passes each fruit as a name prop.

   ---
   const fruits = ['Apple', 'Banana', 'Cherry'];
   ---
   <Item name="fruits" />

   passes the whole array as a string prop, not individual items.

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

   uses forEach which returns undefined, so no output.

   ---
   const fruits = ['Apple', 'Banana', 'Cherry'];
   ---
   <Item>{fruits}</Item>

   passes the whole array as children, not as props.

3. Final Answer:

   Use map to create multiple Item components with name props -> Option A

4. Quick Check:

   Use map for lists in JSX [OK]

Hint: Use map, not forEach, to render lists of components [OK]

Common Mistakes:

• Using forEach instead of map
• Passing whole array as one prop
• Passing array as children instead of props