diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 6487e8007fc..1c61d180a44 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -295,7 +295,7 @@ export default function Square() { } ``` -The _browser_ section should be displaying a square with a X in it like this: +The _browser_ section should be displaying a square with an X in it like this: ![x-filled square](../images/tutorial/x-filled-square.png) @@ -1325,7 +1325,7 @@ Let's recap what happens when a user clicks the top left square on your board to 1. `handleClick` uses the argument (`0`) to update the first element of the `squares` array from `null` to `X`. 1. The `squares` state of the `Board` component was updated, so the `Board` and all of its children re-render. This causes the `value` prop of the `Square` component with index `0` to change from `null` to `X`. -In the end the user sees that the upper left square has changed from empty to having a `X` after clicking it. +In the end the user sees that the upper left square has changed from empty to having an `X` after clicking it. @@ -1406,7 +1406,7 @@ But wait, there's a problem. Try clicking on the same square multiple times: The `X` is overwritten by an `O`! While this would add a very interesting twist to the game, we're going to stick to the original rules for now. -When you mark a square with a `X` or an `O` you aren't first checking to see if the square already has a `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has a `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state. +When you mark a square with an `X` or an `O` you aren't first checking to see if the square already has an `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has an `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state. ```js {2,3,4} function handleClick(i) { @@ -1556,7 +1556,7 @@ It does not matter whether you define `calculateWinner` before or after the `Boa -You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has a `X` or and `O`. We'd like to return early in both cases: +You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has an `X` or an `O`. We'd like to return early in both cases: ```js {2} function handleClick(i) {