0
236
ViewsTypeError: cannot read property of undefined (reading 'map') while fetching from API
I am working on a full stack blog site project where I have created an API for back-end and its working fine and I am getting posts from it but when I try to iterate it using map it throws me error
Server Error TypeError: Cannot read properties of undefined (reading 'map'), I am using NextJS for my front-end.
Code
const Blogs = ({ blogs }) => {
return (
<div className='all-blogs'>
{blogs.map((blog) => (
<div className='single-blog' key={blog._id}>
<h1>{blog.title}</h1>
<p>{blog.text}</p>
</div>
))}
</div>
)
}
export async function getStaticProps() {
const res = await fetch(
'https://ed-blog-api.herokuapp.com/api/posts'
)
const blogs = await res.json()
return {
props: {
blogs,
},
}
}
endpoint I am fetching: https://ed-blog-api.herokuapp.com/api/posts
[![API fetch result on right][1]](https://i.stack.imgur.com/sNL9R.png)
1 answers
Answer question0
The issue here is that blogs, as a prop value, is undefined until the asynchronous logic defines and populates it. You can handle this a couple ways.
Provide a default prop value.
const Blogs = ({ blogs = [] }) => { return ( <div className='all-blogs'> {blogs.map((blog) => ( <div className='single-blog' key={blog._id}> <h1>{blog.title}</h1> <p>{blog.text}</p> </div> ))} </div> ) }Provide a fallback value to map from.
const Blogs = ({ blogs }) => { return ( <div className='all-blogs'> {(blogs ?? []).map((blog) => ( <div className='single-blog' key={blog._id}> <h1>{blog.title}</h1> <p>{blog.text}</p> </div> ))} </div> ) }
Note that in the event the GET requests fails (i.e. the fetch returns a rejected Promise) or any other exception is thrown while processing the request/response, then you will want to guard this by using a try/catch. Either provide valid, defined prop values to the page, or return that an error occurred or that the page content was unable to be found.
export async function getStaticProps() {
let blogs = [];
try {
const res = await fetch('https://ed-blog-api.herokuapp.com/api/posts');
blogs = await res.json();
} catch(error) {
// handle error, logging, etc...
// maybe optionally returning `notFound: true` as a 404
}
return {
props: {
blogs,
},
}
}