Fix sequencing in the Tutorial (#9615)
* Fix sequencing in the Tutorial * Update tutorial.md * Update tutorial.md
Dan Abramov committed
May 5, 2017 at 18:02 UTC
138ff5e46bc631287b340ca1be5ac805f586711a
1 file changed
+17
-3
docs/tutorial/tutorial.md
+17
-3
@@ -293,6 +293,8 @@ class Board extends React.Component {
293
}
294
295
render() {
296
+ const status = 'Next player: X';
297
+
298
return (
299
<div>
300
<div className="status">{status}</div>
@@ -420,6 +422,7 @@ class Board extends React.Component {
422
423
render() {
424
const status = 'Next player: X';
425
+
426
return (
427
<div>
428
<div className="status">{status}</div>
@@ -608,7 +611,7 @@ class Board extends React.Component {
611
{this.renderSquare(8)}
612
</div>
613
</div>
611
- : );
614
+ );
615
}
616
}
617
```
@@ -641,7 +644,9 @@ function calculateWinner(squares) {
644
}
645
```
646
644
-You can call it in Board's `render` function to check if anyone has won the game and make the status text show "Winner: [X/O]" when someone wins:
647
+You can call it in Board's `render` function to check if anyone has won the game and make the status text show "Winner: [X/O]" when someone wins.
648
+
649
+Replace the `status` declaration in Board's `render` with this code:
650
651
```javascript{2-8}
652
render() {
@@ -767,8 +772,17 @@ class Board extends React.Component {
772
}
773
774
render() {
775
+ const winner = calculateWinner(this.state.squares);
776
+ let status;
777
+ if (winner) {
778
+ status = 'Winner: ' + winner;
779
+ } else {
780
+ status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
781
+ }
782
+
783
return (
784
<div>
785
+ <div className="status">{status}</div>
786
<div className="board-row">
787
{this.renderSquare(0)}
788
{this.renderSquare(1)}
@@ -824,7 +838,7 @@ Game's `render` should look at the most recent history entry and can take over c
838
839
Since Game is now rendering the status, we can delete `<div className="status">{status}</div>` and the code calculating the status from the Board's `render` function:
840
827
-```js{1,2}
841
+```js{1-4}
842
render() {
843
return (
844
<div>