#Dynamic variables/filtering with map function not working

1 messages · Page 1 of 1 (latest)

dawn dagger
#

Why is "filteredCharacters" undefined in this code?

---
const { fileName } = Astro.props;

const filePath = `../../content/characters/${fileName}.md`;
const allCharacters = await Astro.glob(`../../content/characters/*.md`);
const filteredCharacters = allCharacters.find((character) =>
    character.file.includes(filePath),
);
---

{
    Object.values(filteredCharacters).map((character) => (
        <p>{character.frontmatter.summaryInfo}</p>
    ))
}
winter fieldBOT
#

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

#

Based on the provided extracts, it's not possible to determine why filteredCharacters is undefined in your code. However, one possible reason could be that the find() method is not finding any character that matches the condition character.file.includes(filePath). This could happen if filePath does not match any of the file paths in allCharacters.

Here's a brief explanation of how the find() method works: it returns the first element in the array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

Please ensure that the filePath correctly corresponds to the file paths in allCharacters. Also, check if the fileName prop is correctly passed to the component.

For more information on how to use Astro.glob() and Astro.props, you can refer to the Astro documentation:


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