Class: Board

Board(props)

The board class.

Basically, it renders the layout of the game, by creating a 3 × 3 grid with a button for each square.

Board takes squares via props and has its own onClick prop specified by Game.

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent. All of this is possible because of closures.

Constructor

new Board(props)

Board constructor.
Parameters:
Name Type Description
props Object component input.
Properties
Name Type Description
squares Array.<String> current array with their 9 squares.
winner Object.<String, Array.<Number>> winner and configuration.
onClick Game#handleClick button onClick callback.
Source:
See:

Extends

Methods

render() → {React.JSX.Element}

Renders the 9 squares of the board.
Source:
See:
Returns:
a <div> tag with a 3 × 3 grid layout, with 3 buttons per row, each of which with value 'X', 'O' or null.
Type
React.JSX.Element

renderSquare(i) → {React.JSX.Element}

We'll pass down a prop, from the Board to the Square, with a value and function, and we'll have Square call that function when a square is clicked.
Parameters:
Name Type Description
i Number square index ∈ [0..8].
Source:
Returns:
the i-th square with its value and click callback.
Type
React.JSX.Element