Props and component composition in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a prop named 'title' to the component.

Astro

<MyComponent [1]="Welcome!" />

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

Aname

Btext

Cheader

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong prop name like 'text' or 'header' which the component does not recognize.

The prop name must match the expected property in the component, which is 'title' here.

2fill in blank

medium

Complete the code to receive the 'title' prop inside the component.

Astro

---
const { [1] } = Astro.props;
---
<h1>{title}</h1>

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

Aheader

Btext

Ctitle

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Destructuring a wrong prop name that was not passed.

Astro.props contains the props passed to the component. We destructure 'title' to use it.

3fill in blank

hard

Fix the error in passing a component as a prop named 'Child'.

Astro

---
import ChildComponent from './ChildComponent.astro';
---
<ParentComponent [1]={ChildComponent} />

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

Achild

BChild

CchildComponent

DChildComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or different casing for the prop name.

The prop name is case-sensitive and must match what ParentComponent expects, which is 'Child'.

4fill in blank

hard

Fill both blanks to render the passed child component inside the parent.

Astro

---
const { [1] } = Astro.props;
---
<div>
  <[2] />
</div>

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

AChild

Bchild

DchildComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for component tags which causes rendering errors.

We destructure 'Child' from props and then render it as a component with <Child />.

5fill in blank

hard

Fill all three blanks to pass a 'message' prop and render it inside the child component.

Astro

---
import Child from './Child.astro';
---
<Child [1]=[2] />

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

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

Amessage

B"Hello from parent!"

Dmsg

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching prop names or forgetting to use curly braces for string values.

The parent passes the 'message' prop with a string value. The child receives it as 'message' and renders it inside a paragraph.

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