Browse Source

Typo fixes (#4091)

* chore: fix typo

* Update referencing-values-with-refs.md

* Fix typo of typo

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
main
harish-sethuraman 3 years ago
committed by GitHub
parent
commit
64e236cf84
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      beta/src/pages/learn/referencing-values-with-refs.md
  2. 2
      beta/src/pages/learn/rendering-lists.md
  3. 2
      beta/src/pages/learn/responding-to-events.md
  4. 2
      beta/src/pages/learn/state-a-components-memory.md

2
beta/src/pages/learn/referencing-values-with-refs.md

@ -357,7 +357,7 @@ export default function Chat() {
<Solution>
Whenever your component re-renders (such as when you set state), all local variables get initialized from scratch. This is why you can't save the timeout ID in a local variable like `timeoutID` and then expect another event handler to "see" it in the future. Instead, store it in a ref, which React will preserve betwen renders.
Whenever your component re-renders (such as when you set state), all local variables get initialized from scratch. This is why you can't save the timeout ID in a local variable like `timeoutID` and then expect another event handler to "see" it in the future. Instead, store it in a ref, which React will preserve between renders.
<Sandpack>

2
beta/src/pages/learn/rendering-lists.md

@ -1086,7 +1086,7 @@ This example renders a famous haiku by Katsushika Hokusai, with each line wrappe
</article>
```
A haiku only contains three lines, but your solution should work with any number of lines. Note that `<hr />` elements only appear *betweeen* the `<p>` elements, not in the beginning or the end!
A haiku only contains three lines, but your solution should work with any number of lines. Note that `<hr />` elements only appear *between* the `<p>` elements, not in the beginning or the end!
<Sandpack>

2
beta/src/pages/learn/responding-to-events.md

@ -312,7 +312,7 @@ button { margin-right: 10px; }
</Sandpack>
Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toobar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
## Event propagation {#event-propagation}

2
beta/src/pages/learn/state-a-components-memory.md

@ -1443,7 +1443,7 @@ In general, these types of mistakes are caught by the [`eslint-plugin-react-hook
### Remove unnecessary state {#remove-unnecessary-state}
When the button is clicked, this example should ask for the user's name and then display an alert gretting them. You tried to use state to keep the name, but for some reason it always shows "Hello, !".
When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason it always shows "Hello, !".
To fix this code, remove the unnecessary state variable. (We will discuss about [why this didn't work](/learn/troubleshooting-state-updates#setting-state-does-not-update-variables) later.)

Loading…
Cancel
Save