Passing Props to Child Components in Astro.js

Lets get started

As most of you know already AstroJs being more famous day by day for amoung web frameworks thanks to their speed and simplicity. Its initiative to send zero Javascript to client make it strong choise for building fast web applications. One of the core concept of Astro Js is a component approach and one of the most important concept is to pass information to child components.

In this article we will understand passing the props to children components in Astro and we will see the behaviours. If you experience with React, Vue or similar frameworks, this topic might be already familiar to you.

Now lets see the basic syntax of passing props from parent to child components.

Card.astro – The Child Component

---
const { title, description } = Astro.props;
---
<div class="card">
  <h2>{title}</h2>
  <p>{description}</p>
</div>

index.astro – The Parent Component

---
import Card from '../components/Card.astro';
---
<card title="Welcome to Astro" description="Build fast websites faster!">
<card title="Another Card" description="Reusable and easy to manage."></card></card>

As you can see above we have passed the title and description fields from index.astro file and we used them in the card.astro file. In child component we destructed them and used them.

Instead of destructuring, We can as well access Astro.props directly from child component. This is useful when you need to pass many props or want to iterate over dynamic keys of props.

---
const props = Astro.props;
---
<h2>{props.title}</h2>
<p>{props.description}</p>

List.astro

---
const { items } = Astro.props;
---
<ul>
  {items.map(item => <li>{item}</li>)}
</ul>

Usage in Parent

<list items="{['Astro'," 'react',="" 'svelte']}=""></list>

Or with an object:

<userprofile user="{{" name:="" "alice",="" age:="" 28="" }}=""></userprofile>

Astro doesn’t have built-in default props like React, but you can define them using JavaScript logic:

---
const { title = "Default Title", description = "Default description" } = Astro.props;
---

If you're using TypeScript, you can also define a prop interface for better readibility and typesafety. This helps catch errors during development and makes your components easier to maintain.

---
interface DataPair {
  title: string;
  description?: string;
}

const { title, description = "Default Description" } = Astro.props as DataPair;
---
... HTML implementation

Props are often used in conditional rendering of some child components. For this we can pass a boolean prop and we can check it in child component for showing other contents.

---
const { isVisible } = Astro.props;
---
{isVisible && <p>This content is visible.</p>}

We can loop through an array and render multiple child components with the dynamic data of the components:

---
import Card from './Card.astro';

const items = [
  { title: "One", description: "First card" },
  { title: "Two", description: "Second card" },
];
---
{items.map(item => <card title="{item.title}" description="{item.description}">)}
</card>

• Use Destructure props for readability.
• Use TypeScript for large projects.
• Avoid deeply nested props unless necessary—keep components focused.

Final Word

That is all

Burak Hamdi TUFAN