From 669890b437a3bef1835fab7673d8364393c6925f Mon Sep 17 00:00:00 2001
From: bev-a-tron <1618914+bev-a-tron@users.noreply.github.com>
Date: Wed, 4 Aug 2021 10:46:40 -0500
Subject: [PATCH] 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>
---
 content/tutorial/tutorial.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index a79c9158..8fc74d6d 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -235,7 +235,7 @@ First, change the button tag that is returned from the Square component's `rende
 class Square extends React.Component {
   render() {
     return (
-      <button className="square" onClick={function() { alert('click'); }}>
+      <button className="square" onClick={function() { console.log('click'); }}>
         {this.props.value}
       </button>
     );
@@ -243,7 +243,7 @@ class Square extends React.Component {
 }
 ```
 
-If you click on a Square now, you should see an alert in your browser.
+If you click on a Square now, you should see 'click' in your browser's devtools console.
 
 >Note
 >
@@ -253,7 +253,7 @@ If you click on a Square now, you should see an alert in your browser.
 >class Square extends React.Component {
 >  render() {
 >    return (
->      <button className="square" onClick={() => alert('click')}>
+>      <button className="square" onClick={() => console.log('click')}>
 >        {this.props.value}
 >      </button>
 >    );
@@ -261,7 +261,7 @@ If you click on a Square now, you should see an alert in your browser.
 >}
 >```
 >
->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.
+>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.
 
 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**.
 
@@ -280,7 +280,7 @@ class Square extends React.Component {
 
   render() {
     return (
-      <button className="square" onClick={() => alert('click')}>
+      <button className="square" onClick={() => console.log('click')}>
         {this.props.value}
       </button>
     );