Why is this array undefined in React?

Question

I have the following code, to set up the mines in a minesweeper game, but I keep getting an error in the plantMines() function, "TypeError: data[randomx] is undefined". I'm new to React, so perhaps I'm missing something simple, but I just cannot see where the problem is.

initBoardData(height, width, mines) {
    let data = this.createEmptyArray(height, width);
    data = this.plantMines(data, height, width, mines);
    return data;
}

// Create array of grid
createEmptyArray(height, width) {
    let data = [];

    for (let i = 0; i < height; i++) {
        data.push([]);
        for (let j = 0; j < width; j++) {
            data[i][j] = {
                x: i,
                y: j,
                isMine: false,
                neighbour: 0,
                isRevealed: false,
                isEmpty: false,
                isFlagged: false
            };
        }
    }
    return data;
}

// Place mines on board
plantMines(data, height, width, mines) {
    let randomx, randomy, minesPlanted = 0;

    while (minesPlanted < mines) {
        randomx = this.getRandomNumber(width);
        randomy = this.getRandomNumber(height);

        if (!(data[randomx][randomy].isMine)) {    //--ERROR ON THIS LINE
            data[randomx][randomy].isMine = true;
            minesPlanted++;
        }
    }
    return (data);
}

getRandomNumber(dimension) {
    return Math.floor((Math.random() * 1000) + 1 % dimension);
}

EDIT: codesandbox - https://codesandbox.io/s/minesweeper-luono?file=/src/Board.js

Please create a small demo for this using codesandbox.io to show the issue happening. — palaѕн
– palaѕн, Commented Apr 20, 2020 at 10:01
Your demo has other errors. Please fix those also except if (!(data[randomx][randomy].isMine)) which is the original issue. — palaѕн
– palaѕн, Commented Apr 20, 2020 at 10:54
@T.Baer Fix <Board height={height} width={width} mines={mines} /> — dellink
– dellink, Commented Apr 20, 2020 at 11:31

Enchew · Accepted Answer · 2020-04-20 10:27:23Z

3

You have error in getRandomNumber - missing parentheses:

getRandomNumber(dimension) {
    return Math.floor(((Math.random() * 1000) + 1) % dimension);
  }

There is one more problem though, use the solution that @dellink presented too:

randomx = this.getRandomNumber(height);
randomy = this.getRandomNumber(width);

You have to make BOTH changes, so it starts working!!

edited Apr 20, 2020 at 10:27

answered Apr 20, 2020 at 10:08

Enchew

9996 silver badges11 bronze badges

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

4 Comments

T. Baer Over a year ago

Thanks, that hasn't solved the original error though

Enchew Over a year ago

What do you mean? Is there a new error now? I tested it out and it seemed to work.

Enchew Over a year ago

When I was making my tests, i was using a square - 10/10, but when you have rectangular dimension, the error was triggered. Now it got fixed.

T. Baer Over a year ago

Hmm that still hasn't changed anything for me

Dharman · Accepted Answer · 2020-04-20 11:45:15Z

3

I figured out the problem. height and width were not properly defined, so randomx and randomy were being taken as strings, not numbers, thus the array definition error.

edited Apr 20, 2020 at 11:45

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Apr 20, 2020 at 10:59

T. Baer

691 silver badge14 bronze badges

Comments

sgltkn · Accepted Answer · 2020-04-20 10:19:32Z

2

You are trying to not existing index of the array. Thus; you are getting undefined error. You can use below or @Enchew's answer.

getRandomNumber(dimension) {
   return Math.floor(Math.random() * Math.floor(dimension));
}

answered Apr 20, 2020 at 10:19

sgltkn

213 bronze badges

Comments

Gianluca Romeo · Accepted Answer · 2020-04-20 10:06:17Z

1

According to your code you should access your array like: data[randomy][randomx]

answered Apr 20, 2020 at 10:06

Gianluca Romeo

1513 bronze badges

1 Comment

T. Baer Over a year ago

Switching them doesn't solve the error, just changes it to "TypeError: data[randomy] is undefined"

dellink · Accepted Answer · 2020-04-20 10:22:05Z

1

try change in this way

randomx = this.getRandomNumber(height);
randomy = this.getRandomNumber(width);

edited Apr 20, 2020 at 10:22

answered Apr 20, 2020 at 10:03

dellink

5493 silver badges16 bronze badges

1 Comment

T. Baer Over a year ago

Thanks for the suggestion, though it didn't seem to make a difference

Collectives™ on Stack Overflow

Why is this array undefined in React?

5 Answers 5

4 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related