Props and component composition in Astro - Mini Project: Build & Apply

Props and Component Composition in Astro

📖 Scenario: You are building a simple Astro website that shows a list of books. Each book has a title and an author. You want to create a reusable BookCard component that receives the book details as props and displays them. Then you will compose multiple BookCard components inside a parent BookList component.

🎯 Goal: Build an Astro project with a BookCard component that accepts title and author as props, and a BookList component that uses multiple BookCard components to show a list of books.

📋 What You'll Learn

Create a list of books as an array of objects with exact titles and authors

Create a BookCard component that accepts title and author props

Use the BookCard component inside BookList to display all books

Pass props correctly from BookList to BookCard

💡 Why This Matters

🌍 Real World

Component composition and props passing are essential for building modular and reusable UI in modern web frameworks like Astro.

💼 Career

Understanding how to pass props and compose components is a fundamental skill for frontend developers working with component-based frameworks.

1

Create the books data array

Create a variable called books that is an array of objects. Each object must have title and author keys with these exact values: { title: 'The Hobbit', author: 'J.R.R. Tolkien' }, { title: '1984', author: 'George Orwell' }, { title: 'Pride and Prejudice', author: 'Jane Austen' }.

Astro

# Create the books array with the exact objects
# Your code here

Hint

Use const books = [ ... ] with objects inside the array.

2

Create the BookCard component with props

Create a new Astro component called BookCard.astro. Inside it, define export interface Props with title and author as strings. Then use these props in the component's HTML to display the book title inside an <h3> and the author inside a <p>.

Astro

Hint

Use export interface Props to define props and access them with Astro.props.

3

Use BookCard inside BookList component

Create a new Astro component called BookList.astro. Import BookCard at the top. Use a for loop with const book of books to render a <BookCard> for each book. Pass title={book.title} and author={book.author} as props to BookCard. Use the exact variable names book, title, and author.

Astro

---
import BookCard from './BookCard.astro';
const books = [
  { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { title: '1984', author: 'George Orwell' },
  { title: 'Pride and Prejudice', author: 'Jane Austen' }
];

Hint

Use books.map((book) => ( ... )) to loop and render <BookCard> components.

4

Render BookList in the main page

In your main page (e.g., src/pages/index.astro), import the BookList component. Then add <BookList /> inside the page's HTML to display the list of books.

Astro

---
import BookList from '../components/BookList.astro';

Hint

Import BookList and add <BookList /> inside the main HTML.

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