Can't display fetched posts in AstroJS

Question

I am trying to build my website in AstroJS and I am not able to display the content I fetch inside the "Masonry" component, which is being rendered as an empty "div" in my browser.

---
import BaseLayout from "../layouts/BaseLayout.astro";
import Masonry from "../components/Masonry.astro";
import ProjectThumbnail from "../components/ProjectThumbnail.astro";
const projects = await Astro.glob('./projects/*.md');
---
{console.log(projects.length)}
<BaseLayout title="overview">
    <Masonry title="grid">
        {projects.map(
            (project)=>{
                console.log(project);
                <ProjectThumbnail title={project.frontmatter.title} w_cols={project.frontmatter.width_cols} h_cols={project.frontmatter.height_cols} />
            }
        )}
    </Masonry>
</BaseLayout>

As you see, there are two console logs:

the first one outputs "2" as there are two .md files in the ./projects directory
the second one ouputs:

{
  frontmatter: [Getter],
  file: [Getter],
  url: [Getter],
  rawContent: [Getter],
  compiledContent: [Getter],
  getHeadings: [Getter],
  getHeaders: [Getter],
  Content: [Getter],
  default: [AsyncFunction: Content] { [Symbol(astro.needsHeadRendering)]: false },
  [Symbol(Symbol.toStringTag)]: 'Module'
}
{
  frontmatter: [Getter],
  file: [Getter],
  url: [Getter],
  rawContent: [Getter],
  compiledContent: [Getter],
  getHeadings: [Getter],
  getHeaders: [Getter],
  Content: [Getter],
  default: [AsyncFunction: Content] { [Symbol(astro.needsHeadRendering)]: false },
  [Symbol(Symbol.toStringTag)]: 'Module'
}

My .md files are named project-sample.md and project-sample-two.md, their content is this (title changes according to the file):

---
title: 'Project sample'
layout: '../../layouts/Project.astro'
thumbnail: '/project-sample-img.jpg'
excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
height_cols: '1'
width_cols: '2'
---

Dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

When I open the posts individualy by going to localhost:3001/projects/project-sample they both display their content as spected.

I hope you can help me by telling me what I am missing here. Best regards!

ps: I am following this reference from Astro's docs

score 0 · Answer 1 · answered Dec 02 '22 at 14:13

Fixed the problem by switching from this:

            (project)=>{
                console.log(project);
                <ProjectThumbnail title={project.frontmatter.title} w_cols={project.frontmatter.width_cols} h_cols={project.frontmatter.height_cols} />
            }

to this:

            (project)=>(
            <ProjectThumbnail title={project.frontmatter.title} w_cols={project.frontmatter.width_cols} h_cols={project.frontmatter.height_cols} />
        )

score -1 · Answer 2 · answered Dec 12 '22 at 14:10

Just for future reference. The problem was in the map function. If you use this structure (with brackets) for the map function:

array.map(item => { return item.something })

You have to add the return.

For the second method (without brackets, with parenthesis but they are optional):

array.map(item => (item.something))

You don't need the return statement.

Can't display fetched posts in AstroJS

2 Answers2