#Layout component not picking up props

3 messages · Page 1 of 1 (latest)

glass frigate
#

I have a layout component that picks up the title and description like this

const { title, description } = Astro.props;

Unfortunately, both are undefined when my resume.md file uses the layout

---
layout: /src/layouts/Layout.astro
title: "John Solly's Resume"
href: /resume/
snippet: "A two-page resume for John Solly, a lead software engineer with a focus on cloud computing and geospatial technologies."
---
weak bronzeBOT
#

Hi @glass frigate. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Astro, the Astro.props object contains any values that have been passed as component attributes. For .md and .mdx files, layout components receive frontmatter values as props (source (https://docs.astro.build/en/reference/api-reference/#astroprops)).

In your case, you are trying to destructure title and description from Astro.props. However, in your frontmatter, you have defined title, href, and snippet, but not description. This is why description is undefined.

To fix this, you should either add a description field to your frontmatter, like this:

---
layout: /src/layouts/Layout.astro
title: "John Solly's Resume"
description: "Your description here"
href: /resume/
snippet: "A two-page resume for John Solly, a lead software engineer with a focus on cloud computing and geospatial technologies."
---

Or, if you meant to use snippet as the description, you should destructure snippet from Astro.props instead of description, like this:

const { title, snippet } = Astro.props;

Remember, the names of the variables you are destructuring need to match the names of the properties in the Astro.props object.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: