Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/content/learn/tutorial-tic-tac-toe.md
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,7 @@ import './styles.css';
import App from './App';
```

Lines 1-5 bring all the necessary pieces together:
Lines 1-5 bring all the necessary pieces together:

* React
* React's library to talk to web browsers (React DOM)
Expand Down Expand Up @@ -551,7 +551,7 @@ export default function Board() {
}
```

Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter.
Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter.

Let's take a look:

Expand Down Expand Up @@ -1094,7 +1094,7 @@ function Square({ value, onSquareClick }) {
}
```

Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component:
Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component:

```js {7}
export default function Board() {
Expand Down Expand Up @@ -1137,7 +1137,7 @@ JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/Java

</Note>

Now you can add X's to the board... but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add an argument `i` to the `handleClick` function that takes the index of the square to update:
Now you can add X's to the board... but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add a argument `i` to the `handleClick` function that takes the index of the square to update:

```js {4,6}
export default function Board() {
Expand Down Expand Up @@ -2073,12 +2073,12 @@ export default function Game() {
}
```

You can see what your code should look like below. Note that you should see an error in the developer tools console that says:
You can see what your code should look like below. Note that you should see an error in the developer tools console that says:

<ConsoleBlock level="warning">
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.
</ConsoleBlock>

You'll fix this error in the next section.

<Sandpack>
Expand Down
Loading