Global

Members

(constant) cTable :Object.<String, String>

Color table for winner color and background.
Type:
  • Object.<String, String>
Source:

Methods

Row(props) → {React.JSX.Element}

Function component to render a row of the board.
Parameters:
Name Type Description
props Object React Props.
Properties
Name Type Description
arr Array.<Number> three row indices.
renderSquare function function for rendering a square.
Source:
Returns:
<div> tag with three squares.
Type
React.JSX.Element

Square(props) → {React.JSX.Element}

A function component.

In React, function components are a simpler way to write components that only contain a render method and don’t have their own state.

Since the Square components no longer maintain state, the Square components receive values from the Board component and inform the Board component when they’re clicked. In React terms, the Square components are now controlled components. The Board has full control over them.
Parameters:
Name Type Description
props Object React Props.
Properties
Name Type Description
value Number an index ∈ [0..8].
color String square color.
backg String square background color.
onClick Game#handleClick button onClick callback.
Source:
See:
Returns:
a <button> tag with the given props.
Type
React.JSX.Element

calculateWinner(squares) → {Object.<winner:String, line:Array.<Number>>}

Given an array of 9 squares, this function will check for a winner and return 'X', 'O', or null as appropriate.
Parameters:
Name Type Description
squares Array.<String> a given array with 9 "X" / "O".
Source:
Returns:
the winner: "X" or "O", and the configuration: line, column or diagonal,
or null, if there is no winner.
Type
Object.<winner:String, line:Array.<Number>>

Type Definitions

state_setter()

Add the new configuration (another square array) to history.

History: Array (5) = $2
 0 {squares: Array}
     squares: [null, null, null, null, null, null, null, null, null] (9)
 1 {squares: Array}
     squares: ["X", null, null, null, null, null, null, null, null] (9)
 2 {squares: Array}
     squares: ["X", null, null, null, null, null, null, null, "O"] (9)
 3 {squares: Array}
     squares: ["X", null, null, null, "X", null, null, null, "O"] (9)
 4 {squares: Array}
     squares: ["X", null, "O", null, "X", null, null, null, "O"] (9)
When you call setState in a component, React automatically updates the child components inside of it too.
Source:
See: