TypeError: cannot read property of undefined (reading 'map') while fetching from API

Question

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]

Drew Reese · Accepted Answer · 2021-11-06 21:55:33Z

2

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,
    },
  }
}

edited Nov 6, 2021 at 21:55

answered Nov 6, 2021 at 5:43

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chemi Adel Over a year ago

But the fetch is inside getStaticProps, props always should be defined unless the fetch thows an error, your argument right only if fetch is declared inside function component.

Drew Reese Over a year ago

@ChemiAdel I didn't say props was undefined, that's not really possible in React. I said the blogs prop value is undefined. In other words, a value hasn't been assigned to it yet.

juliomalves Over a year ago

@ChemiAdel has a point. blogs will only be undefined inside Blog if the request fails inside getStaticProps (note that the error is happening on the server when Next.js is pre-rendering the page). A better solution here is to handle the API call properly in getStaticProps.

Drew Reese Over a year ago

@juliomalves I don't disagree with your comment, added a bit of clarification.

Collectives™ on Stack Overflow

TypeError: cannot read property of undefined (reading 'map') while fetching from API

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related