Components and layouts
Pass component props
Give a component values from its parent and read them through Astro.props.
8 minute lesson
Props look like HTML attributes at the call site:
<Card title="Hello" featured={true} />Inside Card.astro, read them from Astro.props:
---
const { title, featured = false } = Astro.props
---
<article class:list={{ featured }}>
<h2>{title}</h2>
</article>Quoted attributes are strings. Braces pass a JavaScript expression, so arrays, objects, booleans, and numbers use braces:
<Card title="First post" featured={post.isFeatured} />Props flow from parent to child. The parent owns the data and the child owns its presentation. They are available while Astro renders the component; they do not create reactive browser state.
Use a default for an optional prop, as with featured = false. For required values, fail clearly during development instead of silently rendering an empty heading. In the next lesson, TypeScript will make that contract explicit.
Lesson completed