You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/tutorial-tic-tac-toe.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -337,7 +337,7 @@ import './styles.css';
337
337
importAppfrom'./App';
338
338
```
339
339
340
-
Lines 1-5 bring all the necessary pieces together:
340
+
Lines 1-5 bring all the necessary pieces together:
341
341
342
342
* React
343
343
* React's library to talk to web browsers (React DOM)
@@ -551,7 +551,7 @@ export default function Board() {
551
551
}
552
552
```
553
553
554
-
Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter.
554
+
Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter.
555
555
556
556
Let's take a look:
557
557
@@ -1094,7 +1094,7 @@ function Square({ value, onSquareClick }) {
1094
1094
}
1095
1095
```
1096
1096
1097
-
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:
1097
+
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 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:
1140
+
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:
1141
1141
1142
1142
```js {4,6}
1143
1143
exportdefaultfunctionBoard() {
@@ -2073,12 +2073,12 @@ export default function Game() {
2073
2073
}
2074
2074
```
2075
2075
2076
-
You can see what your code should look like below. Note that you should see an error in the developer tools console that says:
2076
+
You can see what your code should look like below. Note that you should see an error in the developer tools console that says:
2077
2077
2078
2078
<ConsoleBlock level="warning">
2079
2079
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.
0 commit comments