React cannot read property map of undefined

by

Cannot read property ‘map’ of undefined, Why?

Because this.state is initially {}, and contacts of {} will be undefined. Important point is, componentDidMount will get called after initial rendering and it is throwing that error during first rendering.

Possible Solutions:

1- Either define the initial value of contacts as [] in state:

constructor(props) {
  super(props)
    this.state = {
       contacts: []
    }
}

2- Or put the check before using map on it:

{this.state.contacts && this.state.contacts.map(....)

For checking array, you can also use Array.isArray(this.state.contacts).

Note: You need to assign unique key to each element inside map, check the DOC.

More Related Contents:

  1. setState doesn’t update the state immediately
  2. How to update nested state properties in React
  3. What do multiple arrow functions mean in JavaScript?
  4. Arrow function without curly braces
  5. How to scroll to an element?
  6. Why shouldn’t JSX props use arrow functions or bind?
  7. Fetch request to local file not working
  8. React Native: require() with Dynamic String?
  9. Concatenating variables and strings in React
  10. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  11. What is the difference between using constructor vs state = {} to declare state in react component?
  12. Can I use arrow function in constructor of a react component?
  13. Active link with React-Router?
  14. ES6 array map doesn’t return anything: ReactJS
  15. setState() inside of componentDidUpdate()
  16. Arrow functions and the use of parentheses () or {} or ({})
  17. Why React Hook useState uses const and not let
  18. What does calling super() in a React constructor do?
  19. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  20. Using JavaScript Axios/Fetch. Can you disable browser cache?
  21. React.createClass vs. ES6 arrow function
  22. this.setState is not a function [duplicate]
  23. redux fetch body is not use with no cors mode
  24. React.js ES6 avoid binding ‘this’ to every method
  25. map function not working in React
  26. React functional component default props vs default parameters
  27. UseEffect being called multiple times
  28. How to post image with fetch?
  29. Deep nested array of objects not rendering
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment