Props and component composition in Astro - Step-by-Step Execution

Concept Flow - Props and component composition

Parent Component

↓

Pass Props to Child

↓

Child Component Receives Props

↓

Child Uses Props to Render

↓

Child Component Output

↓

Parent Renders Child Output

The parent component sends data (props) to the child component, which uses that data to render its part of the UI. The parent then shows the child's output.

Execution Sample

Astro

---
const message = "Hello from parent!";
---
<Child text={message} />

// Child.astro
---
interface Props {
  text: string;
}

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

Parent passes a message prop to Child, which displays it inside a paragraph.

Execution Table

Step	Action	Component	Props Passed	Rendered Output
1	Parent defines message	Parent	message = "Hello from parent!"	No output yet
2	Parent renders Child with prop	Parent	text = "Hello from parent!"	Child component called with prop
3	Child receives props	Child	text = "Hello from parent!"	Prepares to render <p>Hello from parent!</p>
4	Child renders output	Child	text = "Hello from parent!"	<p>Hello from parent!</p>
5	Parent renders Child output	Parent	text = "Hello from parent!"	<p>Hello from parent!</p> shown in parent
6	End of render cycle	Parent & Child	N/A	Final UI shows message inside paragraph

💡 Rendering completes after Child output is included in Parent's UI

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
message	undefined	"Hello from parent!"	"Hello from parent!"	"Hello from parent!"	"Hello from parent!"
text (Child prop)	undefined	undefined	"Hello from parent!"	"Hello from parent!"	"Hello from parent!"

Key Moments - 2 Insights

Why does the Child component need to receive props explicitly?

Because the Child component only knows about data passed to it via props, as shown in execution_table step 3 where it receives 'text'. Without props, it cannot access the parent's data.

Does the Parent component render the Child's output directly?

No, the Parent calls the Child component with props (step 2), then the Child returns its rendered output (step 4), which the Parent includes in its UI (step 5).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'text' prop when Child renders output?

A "Child component called"

B undefined

C "Hello from parent!"

D null

💡 Hint

Check execution_table row 4 under 'Props Passed'

At which step does the Parent pass props to the Child component?

A Step 2

B Step 1

C Step 3

D Step 5

💡 Hint

Look at execution_table 'Action' column for when Parent renders Child with props

If the Parent changes 'message' to "Hi!", what changes in the execution table?

A No changes, message stays the same

B The 'Props Passed' values update to "Hi!" in steps 2-5

C Child stops rendering

D Parent skips rendering Child

💡 Hint

Refer to variable_tracker for 'message' and 'text' values

Concept Snapshot

Props and component composition in Astro:
- Parent defines data (props)
- Parent passes props to Child component
- Child receives props as parameters
- Child uses props to render UI
- Parent includes Child's output in its render
Props enable data flow from parent to child components.

Full Transcript

In Astro framework, components communicate by passing props. The parent component defines data, like a message string. It passes this data as props to a child component by including the child tag with attributes. The child component receives these props as parameters and uses them to render its own UI, for example, displaying the message inside a paragraph. The parent then renders the child's output as part of its own UI. This flow ensures clear data passing and component composition. The execution table shows each step: defining the message, passing it, child receiving it, rendering output, and final UI display. Variables like 'message' and 'text' track the data as it moves from parent to child. Understanding this flow helps beginners see how components work together in Astro.

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