diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index 25cfa29dd5ee8..d0c1d18402e2d 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -183,7 +183,7 @@ And change Square to use `this.props.value` again. Now we need to change what ha return this.handleClick(i)} />; ``` -Now we're passing down two props from Board to Square: `value` and `onClick`. The latter is a function that Square can call. So let's do that by changing `render` in Square to have: +Now we're passing down two props from Board to Square: `value` and `onClick`. The latter is a function that Square can call. So let's replace the `this.setState()` call we used to have inside the button click handler in Square's `render()` with a call to `this.props.onClick()`: ```javascript ``` -This means that when the square is clicked, it calls the onClick function that was passed by the parent. The `onClick` doesn't have any special meaning here, but it's popular to name handler props starting with `on` and their implementations with `handle`. Try clicking a square – you should get an error because we haven't defined `handleClick` yet. Add it to the Board class: +Now when the square is clicked, it calls the `onClick` function that was passed by Board. Let's recap what happens here: + +1. The `onClick` prop on the built-in DOM `