TypeError: Cannot read property 'map' of undefined1

Asked
Active3 hr before
Viewed126 times

9 Answers

typeerrorpropertycannot
90%

The error "Cannot read property 'map' of undefined" will be encountered if there is an error in the "this.props.data" or there is no props.data array. ,The error Cannot read property 'map' of undefined' is thrown when the map function in the CommentList component is executed.,Uncaught TypeError: Cannot read property 'value' of undefined is strictly a JavaScript error. (Note that value can be anything, but for this question value is 'map')

First of all, set more safe initial data:

getInitialState: function() {
   return {
      data: {
         comments: []
      }
   };
},

Updated: you can just wrap the .map block with conditional statement.

if (this.props.data) {
  var commentNodes = this.props.data.map(function (comment){
      return (
        <div>
          <h1>{comment.author}</h1>
        </div>
      );
  });
}
load more v
88%

TL;DR - If you are not in the mode for reading or you just want the bottom line, then here it is,TypeError: Cannot read property ‘map’ of undefined,We could also use an else statement if we want to render something else like a spinner or some text:

// Just a data fetching function
const fetchURL = "https://jsonplaceholder.typicode.com/todos/";
const getItems = () => fetch(fetchURL).then(res => res.json());

function App() {
  const [items, setItems] = useState();

  useEffect(() => {
    getItems().then(data => setItems(data));
  }, []);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}
load more v
72%

The variable you are trying to map over is undefined. It will probably eventually be an array, but due to the asynchronous nature of React, you are experiencing at least one render when the variable is undefined.,This is one of the more common errors you will run into when starting out with React:,And now we have a pretty safe way of handling our async operation without getting the dreaded “cannot read property ‘map’ of undefined” error!

Cannot read property 'map' of undefined
load more v
65%

I’m working on Jammming project but I got stuck on step 34:,“In the TrackList component, use the .map() method to render each track in the tracks property.”,Yes, I think I got it now. The problem is not the TrackList component itself, neither the SearchResults component. I just can’t map tracks property somewhere where it is not defined. I need to test this first, but probably I just couldn’t see the forest from the trees…

This is my code:

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

class TrackList extends React.Component {
  render() {
    return (
      <div className="TrackList">
        {
          this.props.tracks.map(track => {
            return <Track track={track} key={track.id} />
          })
        }
      </div>
    )
  }
}

export default TrackList;

load more v
75%

This error usually means you’re trying to use .map on an array, but that array isn’t defined yet.,That’s often because the array is a piece of undefined state or an undefined prop.,There are a ton of potential causes for an error like this, though.

   6 | return (   7 |   <div className="App">   8 |     <h1>List of Items</h1>>  9 |     {items.map((item) => (     |           ^  10 |       <div key={item.id}>  11 |         {item.name}  12 |       </div>
load more v
40%

Reload Component TypeError: Cannot read property 'map' of undefined,Oh-no! Something’s gone wrong!,I was able to get the example "working" by adjusting static.config.js and using localProps (undocumented maybe for good reason).

in a
   in F in q in DefaultRouter in RouterScroller in s in ErrorBoundary in Router in Unknown in Unknown
load more v
22%

The following code works only with one letter searchs or less (0 letters), i don´t understand what is happening, but apparently it´s a problem in the state update.,I´m using mobx, but i had the same problems without it.,the first letter i digit goes fine, then the second returns a problem, and i don´t really know why.

load more v
60%

Check if you are using map on array or something else like objects.,There are many situations where we can get typeerror of cannot read property ‘map’ of undefined. Remember these points –,React throws typeerror: cannot read property ‘map’ of undefined, when we try to use anything but arrays. According to MDN documentation –

For example, the below code will not work because we are using map on object.

const superheroObj = {
   0: 'Captain America',
   1: 'Ironman',
   2: 'Hulk',
   3: 'Thor',
}

const newSuperheroArray = superheroObj.map((hero, index) => {
   return 'Avenger - ' + hero;
})
load more v
48%

import React, { Component } from 'react' import { connect } from 'react-redux';, We're a place where coders share, stay up-to-date and grow their careers. , We're a place where coders share, stay up-to-date and grow their careers.

          <div className="row">
             <div className="col-md-6 mb-4 mb-md-0">

                <div id="mdb-lightbox-ui"></div>

                <div className="mdb-lightbox">

                   <div className="row product-gallery mx-1">

                      <div className="col-18 mb-0">


                         <div class="container my-4">
                            <div id="carouselExample1" class="carousel slide z-depth-1-half" data-ride="carousel">
                               <div class="carousel-inner">
                                  <div class="carousel-item active">
                                     <img height="500px" class="d-block w-100 " src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="First slide" />
                                  </div>
                                  <div class="carousel-item">
                                     <img height="500px" class="d-block w-100 " src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Second slide" />
                                  </div>
                                  <div class="carousel-item">
                                     <img height="500px" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Third slide" />
                                  </div>
                               </div>
                               <a class="carousel-control-prev" href="#carouselExample1" role="button" data-slide="prev">
                                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                  <span class="sr-only">Previous</span>
                               </a>
                               <a class="carousel-control-next" href="#carouselExample1" role="button" data-slide="next">
                                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                  <span class="sr-only">Next</span>
                               </a>
                            </div>


                         </div>


                      </div>
                      <div className="col-12">
                         <div className="row">
                            {item.itemImages.map(itemImage=>(
                            console.log("inside itemimages array")

Other "typeerror-property" queries related to "TypeError: Cannot read property 'map' of undefined1"