Home>
I can't use map with React

I'm making Minesweeper with React, but I get an error with the map function.

Please tell me why the map function cannot be used.
Reference video ↓
https://www.youtube.com/watch?v=BLdd0zP-tAw
It is the same source code as about 23 minutes of this person's video

TypeError: Cannot read property'map' of undefined
Corresponding source code

Board.js

import React, {useState, useEffect} from "react";
import CreateBoard from "../util/CreateBoard";
const Board = () =>{
    // ↓ Hook: const [object, method to call when changing object] = useState (initial value of variable)
    // You can use state without writing a merit class
    const [grid, setGrid] = useState ([]);
    useEffect (() =>{
        function freshBoard () {
            const newBoard = CreateBoard (5, 5, 10);
            setGrid (newBoard);
        }
        freshBoard ();
    },

 []);
    /*if(!grid.board){
        return  Loading ;
    }
    * /
    // ↓ Here is the error map
    return grid.board.map (singleRow =>{
        return  {JSON.stringify (singleRow)}     });
};
export default Board;
Additional code

CreateBoard.js

export default (row, col, bombs) =>{
    let board = [];/* Array that stores mass data for the number of columns in one row
                                Array */that stores the number of rows
    let mineLocation = [];// Array to store bomb locations
    // Create a blank board
    // Initialize mass information
    for (let x = 0;x<row;x ++) {// Row initialization
        let subCol = [];// Array that stores mass data for the number of columns in one row
        for (let y = 0;y<col;y ++) {// Column initialization
            // push (): add element to the end of the array
            subCol.push ({
                   value: 0,
                   revealed: false,
                   x: x,
                   y: y,
                   flagged: false,
               }
            );
        }
        board.push (subCol);
    }
    // Randomly decide the location of the bomb
    let bombsCount = 0;
    while (bombsCount<bombs) {
        // 0 ~ Number of rows (number of columns) -1 Random number acquisition
        let x = randomNum (0, row --1);
        let y = randomNum (0, col --1);
        // When value is 0, bomb judgment
        if (board [x] [y] .value === 0) {
            // Display bombs with X
            board [x] [y] .value = "X";
            // Store the location of the bomb
            mineLocation.push ([x, y]);
            // Count the number of bombs
            bombsCount ++;
        }
    }
    // Determine the number of bombs around the square
    for (let roww = 0;roww<row;roww ++) {
        for (let coll = 0;coll<col;col ++) {
            if (board [roww] [coll] .value === "X") {
                // When the target square is a bomb
                continue;continue;
            }
            // Right above the target square
            if (roww>0&&board [roww -1] [coll] .value === "X") {
                board [roww] [coll] .value ++;
            }
            // Upper right of the target square
            if (
                roww>0&&
                coll<col --1&&
                board [roww --1] [coll + 1] .value === "X"
            ) {
                board [roww] [coll] .value ++;
            }
            // Right of the target square
            if (coll<col --1&&board [roww] [coll + 1] .value === "X") {board [roww] [coll] .value ++;
            }
            // Bottom right of the target square
            if (
                roww<row --1&&
                coll<col --1&&
                board [roww + 1] [coll + 1] .value === "X"
            ) {
                board [roww] [coll] .value ++;
            }
            // Just below the target square
            if (roww<row --1&&board [roww + 1] [coll] .value === "X") {
                board [roww] [coll] .value ++;
            }
            // Bottom left of the target square
            if (
                roww<row --1&&
                coll>0&&
                board [roww + 1] [coll -1] .value === "X"
            ) {
                board [roww] [coll] .value ++;
            }
            // Left of the target square
            if (coll>0&&board [roww] [coll -1] .value === "X") {
                board [roww] [coll] .value ++;
            }
            // Upper left of the target square
            if (roww>0&&coll>0&&board [roww -1] [coll -1] .value === "X") {
                board [roww] [coll] .value ++;
            }
        }
    }
    return {board, mineLocation};
};
// Random function
function randomNum (min = 0, max) {
    return Math.floor (Math.random () * (max --min + 1) + min);
}
What I tried

Check the source code
Search for error statements

Supplementary information (FW/tool version, etc.)

Node.js is already installed.
The version is 12.19.0
npm is
6.14.8

  • Answer # 1

    gridThe initial value of is just an array[]Sogrid.boardIsundefinedis.

    const [grid, setGrid] = useState (() =>CreateBoard (5, 5, 10));Let's set a reasonable value as the initial value like.

  • Answer # 2

    setGrid (newBoard);

    gridToboardIs set as it is, so it is not nested,gridButboardIsn't it supposed to be?
    grid.board.mapnotgrid.mapThen it seems to work, but ...

    Postscript

    I'm sorry, the above was an incorrect answer.
    The second argument of useEffect is[]It seems that is the cause.