diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md
index 816f5bcc5..694387032 100644
--- a/content/docs/faq-functions.md
+++ b/content/docs/faq-functions.md
@@ -113,22 +113,23 @@ This is equivalent to calling `.bind`:
#### Example: Passing params using arrow functions
```jsx
-class Component extends React.Component {
+const A = 65 // ASCII character code
+class Alphabet extends React.Component {
state = {
- justClicked: 0,
- items: Array.from({length: 5}, (_, i) => i)
+ justClicked: null,
+ letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))
}
- handleClick = i => this.setState({ justClicked: i })
+ handleClick = letter => this.setState({ justClicked: letter })
render () {
return (
Just clicked: {this.state.justClicked}
- { this.state.items.map(i =>
- - this.handleClick(i)}>
- Item: {i}
+ { this.state.letters.map(letter =>
+
- this.handleClick(letter)}>
+ {letter}
) }
@@ -143,15 +144,16 @@ class Component extends React.Component {
Alternately, you can use DOM APIs to store data needed for event handlers. Consider this approach if you need to optimize a large number of elements or have a render tree that relies on React.PureComponent equality checks.
```jsx
-class Component extends React.Component {
+const A = 65 // ASCII character code
+class Alphabet extends React.Component {
state = {
- justClicked: 0,
- items: Array.from({length: 5}, (_, i) => i)
+ justClicked: null,
+ letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))
}
handleClick = event => {
this.setState({
- justClicked: event.target.dataset.i
+ justClicked: event.target.dataset.letter
})
}
@@ -160,9 +162,9 @@ class Component extends React.Component {
Just clicked: {this.state.justClicked}
- { this.state.items.map(i =>
- -
- Item: {i}
+ { this.state.letters.map(letter =>
+
-
+ {letter}
) }