TypeError: Cannot read property 'undefined' of undefind

#1

I’m working on the Roguelike Dungeon Crawler project, using Create-React-App. I have all of the code written and all of the packages I need installed and it should be ready to go. Yet I’m getting this error in the index.js file of my Map Generator folder, which is meant to generate the map. This is the sample of code that says is causing the issue. It specifically highlights the If statement.

const generateLevel = (map, level) => {
  const mapItems = getLevelItems(level);
  const dungeonLevel = Array(...map);

  while (mapItems.length > 0) {
    const randomRow = randomIndexBetweenValues(1, dungeonLevel.length - 2);
    const randomCol = randomIndexBetweenValues(1, dungeonLevel[0].length - 2);

    if (dungeonLevel[randomRow][randomCol] > 1) {
      dungeonLevel[randomRow][randomCol] = mapItems.pop();
    }
  }

  return dungeonLevel;
};

As far as I can tell, nothing is spelled incorrectly and the If statement is properly written.

#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

Right above the if statement, I would put the following console.log statement to see where the undefined values are located:

console.log('dungeonLevel[' + randomRow + ']['+ randomcol + '] = ' + dungeonLevel[randomRow][randomCol];
#3

I’ve tried doing this but I still can’t find where the undefined values are. Wouldn’t all the values in the If statement already be defined by making them constants?

#4

When you use the console.log as I mentioned, what is the exact output to the console?

#5

This what it outputs:

Uncaught TypeError: Cannot read property 'undefined' of undefined
    at generateLevel (index.js:121)
    at generateDungeon (index.js:132)
    at new App (App.js:63)
    at constructClassInstance (react-dom.development.js:9760)
    at updateClassComponent (react-dom.development.js:10215)
    at beginWork (react-dom.development.js:10605)
    at performUnitOfWork (react-dom.development.js:12573)
    at workLoop (react-dom.development.js:12682)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at scheduleUpdateImpl (react-dom.development.js:13185)
    at scheduleUpdate (react-dom.development.js:13124)
    at scheduleTopLevelUpdate (react-dom.development.js:13395)
    at Object.updateContainer (react-dom.development.js:13425)
    at react-dom.development.js:17105
    at Object.unbatchedUpdates (react-dom.development.js:13256)
    at renderSubtreeIntoContainer (react-dom.development.js:17104)
    at Object.render (react-dom.development.js:17129)
    at Object../src/index.js (index.js:6)
    at __webpack_require__ (bootstrap 5c6120574084172ab8ec:669)
    at fn (bootstrap 5c6120574084172ab8ec:87)
    at Object.0 (index.js:7)
    at __webpack_require__ (bootstrap 5c6120574084172ab8ec:669)
    at bootstrap 5c6120574084172ab8ec:715
    at bundle.js:719
#6

What line # is the following console.log statement on?

console.log('dungeonLevel[' + randomRow + ']['+ randomcol + '] = ' + dungeonLevel[randomRow][randomCol];

Do you have a link to your current project? It might be easier for me to debug if I could see all the code.

#7

Sure, here’s the GitHub repo: https://github.com/darthm3gatron/Dungeon-Crawler.

The console.log statement is on line 121 in MapGenerator/index.js.

#8

What is the path for MapGenerator/index.js? I could not find it in the repo. I am new to React, so it maybe somewhere obvious (if I knew React).

#9

Sorry, looks like I was in the wrong directory when I pushed it to Github XD.

This one should do it: https://github.com/darthm3gatron/Dungeon-Crawler-2

#10

You need to look at your randomeIndexBetweenValues function:

const randomIndexBetweenValues = (min, max) => {
    Math.floor((Math.random() * ((max - min) + 1)) + min);
};

This code above returns undefined, which causes both randomRow and randomCol to be undefined. If you are not sure why it is returning undefined, then I suggest you review arrow function syntax.

#11

All right, thanks! Turns out there were instances of me using curly braces when I didn’t need to. Thank you so much for your help!