Browse Source

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>
main
bev-a-tron 3 years ago
committed by GitHub
parent
commit
669890b437
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 10
      content/tutorial/tutorial.md

10
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>
);

Loading…
Cancel
Save