I stuck at the "Storing a history" part of the tutorial, trying to pull state up from Board to Game. I've removed constructor from Board and was trying to change Board so that it takes squares via props:

 renderSquare(i) {
    return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
  }

but it fails..

code:

I stuck at the "Storing a history" part of the tutorial, trying to pull state up from Board to Game. I've removed constructor from Board and was trying to change Board so that it takes squares via props:

 renderSquare(i) {
    return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
  }

but it fails..

code: https://codepen.io/gka/pen/eBgapz

• javascript
• reactjs
• jsx

2 Answers 2

In your example, you pass in squares as props. So you need to change

renderSquare(i) {
    return (
      <Square 
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />;
    );
}

into

renderSquare(i) {
    return (
      <Square 
        value={this.props[i]}
        onClick={() => this.props.onClick(i)}
      />;
    );
}

Because this.props already refers to the squares you passed in.

I had my App render Board instead of Game, so that was the reason it wasn't working.