setState not running in nested function

Question

this.setState at the end of constructBoard doesn't appear to run when contructBoard is called. The function runs and works as intended other that setState not appearing to run. The callback function doesn't run either.

class Board extends Component {
    state = {
      layout: null
    }

    contructBoard = (boardSize) => {
      let board = []
      let boardStateLayout = {}
      for (let row = 0; row < boardSize; row++) {
        let temp = []
        for (let column = 0; column < boardSize; column++) {
          let style = null;
          let key = row.toString() + column.toString()
          //Top left corner
          if (row === 0 && column === 0) {
            style = "topLeft"
            //Top right corner
          } else if (row === 0 && column === boardSize - 1) {
            style = "topRight"
            //Bottom left corner
          } else if (row === boardSize - 1 && column === 0) {
            style = "bottomLeft"
            //Bottom right corner
          } else if (row === boardSize - 1 && column === boardSize - 1) {
            style = "bottomRight"
            //Top row
          } else if (row === 0 && (column > 0 && column < boardSize - 1)) {
            style = "topRow"
            //First column
          } else if (column === 0 && (row > 0 && row < boardSize - 1)) {
            style = "firstColumn"
            //Bottom Row
          } else if (row === boardSize - 1 && (column > 0 && column < boardSize - 1)) {
            style = "bottomRow"
            //Last column
          } else if (column === boardSize - 1 && (row > 0 && row < boardSize - 1)) {
            style = "lastColumn"
          } else {
            style = "middle"
          }
          temp.push(<td key={key} onClick={this.handleSquareClick} className={style}></td>);
          boardStateLayout[key] = {
            showEl: false,
            el: "x"
          }
        }
        board.push(<tr key={"row" + row.toString()}>{temp}</tr>)
      }
      this.setState({layout: boardStateLayout}, () => console.log('set state'));
      return <table className="board"><tbody>{board}</tbody></table>
    }


    board = this.contructBoard(3);

    render() {
      return (
        <div className="boardContainer">
            {this.board}
            {/*<XorO layout={this.state.layout} />*/}
        </div>
      );
    }
    }

You are essentially calling `setState` during the component's construction and the [React docs](https://reactjs.org/docs/react-component.html) say not to do that. If you want to give the component an initial state, you should add a constructor and assign the state directly. `this.state = { layout: boardStateLayout }` — JLRishe, Jul 21 '21 at 04:07
@JLRishe Thanks that works! I was getting the "Do not mutate state directly" warning but I wasn't wrapping the function and function call in with the constructor. I've read the docs and understand now. Thanks again. I don't know how to set your answer as the right answer but I will when I figure it out. — Valisea, Jul 21 '21 at 04:27

score 1 · Answer 1 · answered Apr 10 '22 at 21:38

You're basically trying to call setState during the component's construction which React Docs discourage.

If you want to set an initial state like that you should add a constructor and assign the state directly.

Like this:

this.state = { layout: boardStateLayout }

setState not running in nested function

1 Answers1