trying to wrap my head around const { title } = Astro.props; | Astro Lounge | Page 1

granite shell May 9, 2024, 2:31 PM

#

good morning! i am still getting acclimated to Astro and see a lot of const { title } = Astro.props.

I get that i am supposed to pass in {title} as a prop but confused on whether in the codefence I also need to declare the page title or how I can store and assign page titles in a more applicable way.

barren hill May 9, 2024, 3:57 PM

#

const { title } = Astro.props

is called deconstructing and is equivalent to:

const title = Astro.props.title

You can type your props by doing:

type Props = {
  title: string
}
const { title } = Astro.props

or

interface Props {
  title: string
}
const { title } = Astro.props

You can use title?: string to make the prop optional.
By typing your props, you'll get intellisense when you use your component and red-squiggles if you use an invalid prop.

granite shell May 9, 2024, 5:07 PM

#

barren hill ```ts const { title } = Astro.props ``` is called deconstructing and is equivale...

thank you for laying that out for me

to make sure I understood, I can define:

type Props = {
  title: '- website name'
}
const { title } = Astro.props

and then pass it like

<title>Contact {title}</title>

#

and if I were to have like a Header.astro with all my meta tags and stuff if I include

type Props = {
title: '- website name'
}
const { title } = Astro.props

in the codefence and have <Header /> in my page layout it'll be included in all pages or do i have to reapply the statement to all codefences on pages?

#trying to wrap my head around const { title } = Astro.props;