Can't display fetched posts in Astro

[analog otter]

Hello everyone! I am building my website in Astro An I'm having problems displaying the fetched posts. It seems that the posts are actually fetched, but the are not inserted into the HTML. I have made this stakoverflow question in which you can find a more detailed description of the problem: https://stackoverflow.com/questions/74648396/cant-display-fetched-posts-in-astrojs . Thanks in advance!

[wild linden]

you need to map frontmatter and Content

umm
did you passed
props ?

in the Project Thumbnail ?

[river lichen]

instead of /project-sample-img.jpg try putting ./project-sample-img.jpg

lmk if it works

[analog otter]

thanks for correcting me!, but it did not worked out to soe my problem

[river lichen]

you have the image on ur public folder right?

[analog otter]

yes

[analog otter]

yes! i passed them like this:
<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>

[river lichen]

ur not really passing the project.frontmatter.thumbnail in the props

maybe u missed that?

[analog otter]

how do I pass them? I was following the example in the astro documentation, do you have any resource i can check?, I am bit new to all this stuff ._.

[river lichen]

Just like u passed title and other props

[analog otter]

That makes sense bc when i print the length of projects, it seems that there are actually fetched posts

[river lichen]

In ur ProjectThumbnail component

[wild linden]

no no
I meant in
ProjectThumbnail component

https://docs.astro.build/en/reference/api-reference/#astroprops

[analog otter]

yes, this is what the ProjectThumbnail component has inside:

---

export interface props{
//url:string;
//img:string;
title: string;
w_cols: string;
h_rows: string;
}
const {w_cols, h_rows, title} = Astro.props;

<div class={'border border-black-900 flex flex-col '+'col-span-'+w_cols+' row-span-'+h_rows}>
<img src="https://cdn.myportfolio.com/7c4a171b-41c2-4ebf-9df9-da1d05daaede/f0a04aa3-ab7a-4f52-9c9a-7dfc14c868d2_carw_202x158x1280.png?h=457b298f0db2e7c66115a5aef3b73992" />
<h4 class="text-sm">{title}</h4>
</div>

[wild linden]

ahh

I see

nvm :3

[analog otter]

the image is static for the moment, but the weird thing is if the component is having empty props, it should be still rendered but it would look like this in the DOM: <ProjectThumbnail title="" h_cols="" w_cols=""/>

or am i wrong?

[wild linden]

btw
remove that projectThumbnail for a while ?

and debug with normal div ?

[analog otter]

will try that

{projects.map(
(project)=>{
console.log(project);
<div>
<img src="https://cdn.myportfolio.com/7c4a171b-41c2-4ebf-9df9-da1d05daaede/f0a04aa3-ab7a-4f52-9c9a-7dfc14c868d2_carw_202x158x1280.png?h=457b298f0db2e7c66115a5aef3b73992" />
<h4 class="text-sm">{project.frontmatter.title}</h4>
</div>
}
)}

i used this, but it is very weird that i do not get anything

even the static image is not being displayed

and the upper div does not get rendered too

[wild linden]

i think
() => () ????

I think { } need a return statement ?

[analog otter]

seems that is the problem

[analog otter]

i just did :
{projects.map(
(project)=>{
console.log(project.frontmatter.title);
}
)}

and it prints the right values

[analog otter]

That was the problem, switched to ()=>() and it works fine

thanks so much for your help @wild linden 🌈