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 { class Square extends React.Component {
render() { render() {
return ( return (
<button className="square" onClick={function() { alert('click'); }}> <button className="square" onClick={function() { console.log('click'); }}>
{this.props.value} {this.props.value}
</button> </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 >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 { >class Square extends React.Component {
> render() { > render() {
> return ( > return (
> <button className="square" onClick={() => alert('click')}> > <button className="square" onClick={() => console.log('click')}>
> {this.props.value} > {this.props.value}
> </button> > </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**. 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() { render() {
return ( return (
<button className="square" onClick={() => alert('click')}> <button className="square" onClick={() => console.log('click')}>
{this.props.value} {this.props.value}
</button> </button>
); );

Loading…
Cancel
Save