ReactJS Tic Tac Toe Tutorial - Constructor Purpose

Question

I'm new to coding and have done some online courses with JS and am currently going through the ReactJS Tic Tac Toe tutorial (here). I understand the general logic, but am confused by what the constructor in the Board class is doing:

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
    };
  }

  renderSquare(i) {
    return <Square value={i} />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

From what I understand, it's initializing the board and the board state, but when I fiddle with the code and change the number of squares as defined in the null array it doesn't change the functionality of the board/game. If I delete the array out, however, the code crashes. What is the purpose of the constructor and why does changing the array length to not equal the number of squares on the board not affect the game, but not including the array does?

Answer 1

The constructor here sets the props and initial state of the react component in the super call.

You are never actually referencing the state variable anywhere. Every time you call render square, you're just rendering a new square component with that index. There is no magical-behind-the-scenes linking that goes on.

Answer 2

Before you ever use state inside a component, you need to initialize the state object. To initialize state, you set the property state to a plain JavaScript object inside the class' constructor method. For example:

import React, {Component} from react;

class SearchBar extends Component {
    constructor(props)
    super(props)

    this.state = {term: ' '};

    render() {
    return <input onChange={event => console.log(event.target.value)} />;
    }
}

This is how we initialize state in a class-based component.

All JavaScript classes have a special function called constructor. A constructor function is the first and only one called automatically whenever a new instance of the class is created.

Component itself has its own constructor function. When we define a method that is already defined on the parent class, which is Component, we call that parent method on the parent class by calling super.

Whenever we use state, we initialize it by creating a new object and assigning it this.state and the object we pass will also contain properties that we want to record on the state, in your case its squares:.

You can learn a bit more here: https://reactjs.org/docs/react-component.html#constructor