React.js - Cannot read property 'map' of undefined

Question

When the component mounts, I'm making an ajax request that returns an Object with an array of objects.

getPages() {
  getAllPagesData().then((pages) => {
    let data = pages
    this.setState({ pages });
  });
}

Inside this function I can access the data effectively.

console.log(pages.pages[0].description)

Prints the correct page description.

In render I'm setting state to a variable to access in my return:

render() {

  const pages = this.state.pages.pages
  console.log(pages)

return (

That console.log in chrome is:

(55) [Object, Object, Object, Object,...

I'm then trying to iterate through the array using map:

return (
  <div>
    <Nav />
     { pages.map((post, index) => (

It breaks the page and the error is: Cannot read property 'map' of undefined at Pages.render

I've tried many different ways to access this object and the array inside of it, but cannot get individual array items to display inside the render function.

Yangshun Tay · Accepted Answer · 2017-06-09 02:11:10Z

1

Try using this line in the render method

const pages = this.state.pages.pages || [ ]

It is most likely because the render method is called before the ajax request is complete. So the this.state.pages.pages is undefined initially.

edited Jun 9, 2017 at 2:11

Yangshun Tay

53.7k34 gold badges126 silver badges150 bronze badges

answered Jun 9, 2017 at 1:33

JiN

8281 gold badge8 silver badges15 bronze badges

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

1 Comment

David Henriquez Over a year ago

"It is most likely because the render method is called before the ajax request is complete" - ah, that seems likely... Yup, that worked, thanks!

Collectives™ on Stack Overflow

React.js - Cannot read property 'map' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related