From 5c88d16a06b68c922aa43180d364db9ab0964f17 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 5 May 2017 18:02:13 +0100 Subject: [PATCH] Fix sequencing in the Tutorial (#9615) * Fix sequencing in the Tutorial * Update tutorial.md * Update tutorial.md --- tutorial/tutorial.md | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/tutorial/tutorial.md b/tutorial/tutorial.md index 07e933af..4ab2dc85 100644 --- a/tutorial/tutorial.md +++ b/tutorial/tutorial.md @@ -293,6 +293,8 @@ class Board extends React.Component { } render() { + const status = 'Next player: X'; + return (
{status}
@@ -420,6 +422,7 @@ class Board extends React.Component { render() { const status = 'Next player: X'; + return (
{status}
@@ -608,7 +611,7 @@ class Board extends React.Component { {this.renderSquare(8)}
- : ); + ); } } ``` @@ -641,7 +644,9 @@ function calculateWinner(squares) { } ``` -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: +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. + +Replace the `status` declaration in Board's `render` with this code: ```javascript{2-8} render() { @@ -767,8 +772,17 @@ class Board extends React.Component { } render() { + const winner = calculateWinner(this.state.squares); + let status; + if (winner) { + status = 'Winner: ' + winner; + } else { + status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); + } + return (
+
{status}
{this.renderSquare(0)} {this.renderSquare(1)} @@ -824,7 +838,7 @@ Game's `render` should look at the most recent history entry and can take over c Since Game is now rendering the status, we can delete `
{status}
` and the code calculating the status from the Board's `render` function: -```js{1,2} +```js{1-4} render() { return (