Skip to content

Commit 669890b

Browse files
bev-a-tronBev Lau
and
Bev Lau
authored
Use console.log in tutorial instead of alert (#3831)
* Updating tutorial to use console.log instead of alert Chrome is deprecating alerts * Revert remove space from my auto-linter Co-authored-by: Bev Lau <bev@fb.com>
1 parent 9c2b800 commit 669890b

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

content/tutorial/tutorial.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -235,15 +235,15 @@ First, change the button tag that is returned from the Square component's `rende
235235
class Square extends React.Component {
236236
render() {
237237
return (
238-
<button className="square" onClick={function() { alert('click'); }}>
238+
<button className="square" onClick={function() { console.log('click'); }}>
239239
{this.props.value}
240240
</button>
241241
);
242242
}
243243
}
244244
```
245245

246-
If you click on a Square now, you should see an alert in your browser.
246+
If you click on a Square now, you should see 'click' in your browser's devtools console.
247247

248248
>Note
249249
>
@@ -253,15 +253,15 @@ If you click on a Square now, you should see an alert in your browser.
253253
>class Square extends React.Component {
254254
> render() {
255255
> return (
256-
> <button className="square" onClick={() => alert('click')}>
256+
> <button className="square" onClick={() => console.log('click')}>
257257
> {this.props.value}
258258
> </button>
259259
> );
260260
> }
261261
>}
262262
>```
263263
>
264-
>Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. React will only call this function after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders.
264+
>Notice how with `onClick={() => console.log('click')}`, we're passing *a function* as the `onClick` prop. React will only call this function after a click. Forgetting `() =>` and writing `onClick={console.log('click')}` is a common mistake, and would fire every time the component re-renders.
265265
266266
As a next step, we want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use **state**.
267267
@@ -280,7 +280,7 @@ class Square extends React.Component {
280280
281281
render() {
282282
return (
283-
<button className="square" onClick={() => alert('click')}>
283+
<button className="square" onClick={() => console.log('click')}>
284284
{this.props.value}
285285
</button>
286286
);

0 commit comments

Comments
 (0)