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 ( - ); @@ -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 ( -> > ); @@ -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 ( - );