Props and component composition in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are props in Astro components?

Props are inputs passed to a component to customize its content or behavior. They let you send data from a parent component to a child component.

beginner

How does component composition work in Astro?

Component composition means building complex UI by combining smaller components. You put child components inside parent components to reuse and organize code.

beginner

How do you pass props to a child component in Astro?

You add attributes to the child component tag with the prop names and values. For example: <Child name="Alice" /> passes a prop called name with value "Alice".

intermediate

Why is using props better than hardcoding values inside components?

Props make components flexible and reusable. Instead of repeating code, you change the input data to get different results without changing the component itself.

intermediate

What happens if a required prop is missing in an Astro component?

If a prop is missing, the component may show default content or cause errors depending on how it handles missing data. It's good to provide default values or check props inside the component.

How do you send data from a parent to a child component in Astro?

A By using global variables

B By importing the child component inside the parent

C By writing data inside the child component only

D By passing props as attributes on the child component tag

Props are passed as attributes on the child component tag to send data from parent to child.

What is component composition in Astro?

A Writing all code in one big component

B Combining smaller components inside bigger ones

C Using only built-in HTML tags

D Passing props without components

Component composition means building UI by combining smaller components inside bigger ones.

Which syntax correctly passes a prop named 'title' with value 'Hello' to a component Card?

A <Card title="Hello" />

B <Card 'title' = Hello />

C <Card title: Hello />

D <Card {title: 'Hello'} />

Props are passed as attributes with name and value pairs like .

Why should you use props instead of hardcoding values inside components?

A To make components reusable and flexible

B To make components slower

C To avoid using components

D To write more code

Props allow components to be reused with different data, making them flexible.

What is a good practice when a prop might be missing in a component?

A Ignore missing props and do nothing

B Always crash the app

C Provide default values or check props inside the component

D Remove the component

Providing default values or checking props helps avoid errors when props are missing.

Explain how props work in Astro and why they are important for component composition.

Think about how you pass information from a parent to a child in a family.

Describe how you would compose a parent component using two child components with different props in Astro.

Imagine building a sandwich with different ingredients as child components.

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