System Information
- **Strapi Version4.0.4:
- **Operating SystemMAC OS Monterey 12.1 Apple M1:
- **DatabaseWith Cloudinary and NEXT:
- **Node Version16.13.0:
- **NPM Version8.3.0:
- **Yarn VersionNA:
HI!
I am a little lost here, I am following a tutorial that is using Strapi V3 and I would like to build my project with V4 in mind but I am stuck at this point
I have my staticprops
export async function getStaticProps() {
const res = await fetch(`${API_URL}/api/posts?populate=*`);
const json = await res.json();
const posts = json.data;
return {
props: { posts },
revalidate: 1,
};
}
Destructed as followed
<div>
<Layout>
<TitleCard />
{posts.length === 0 && <h3>No Posts to show</h3>}
{posts.map(pst => (
<PostItem key={pst.id} pst={pst} />
))}
</Layout>
</div>
That works, it recognizes that I have 2 posts stored in Strapi so it shows I have 2 posts but this is where my limited knowledge takes me back
const PostItem = ({ pst }) => {
const { attributes } = pst;
return (
<div className='container'>
<div className='post'>
<div className='info-wrapper'>
<div className='postItem-description-wrapper'>
<div className='title-name-size'>
<h1>{pst.name}</h1>
</div>
<div className='read-more-align'>
<p>{pst.description} </p>
<div className='link'>
<Link href={`/stories/${pst.slug}`}>
<a className='read-more'>Read More</a>
</Link>
</div>
</div>
</div>
</div>
<div className='img-container'>
<div className='img-overlay'></div>
<img
className='img'
src={
pst.image
? attributes.image.data.attributes.formats.thumbnail.url
: '/images/default.png'
}
alt='Test'
/>
</div>
</div>
</div>
);
};
I feel like I am missing something at the src image as it reverts to the default ‘if there is no image’ part of my js statement
When using curl on my local host it does show an object of data attributes including the image
Would I need to use useEffect/useState hooks in this case? Any direction regarding this would be helpful!
Thank you