Convert the Number component to ListItem (#8039)
* Convert the Number component to ListItem * Add updated example CodePen Also fixes typos.
Ragnar Þór Valgeirsson committed
Oct 22, 2016 at 20:44 UTC
7340fa9d933781747be0c3ac9850e264590fe5cd
1 file changed
+13
-13
docs/docs/lists-and-keys.md
+13
-13
@@ -42,7 +42,7 @@ ReactDOM.render(
42
);
43
```
44
45
-[Try it out on Codepen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
45
+[Try it out on CodePen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
46
47
This code displays a bullet list of numbers between 1 and 5.
48
@@ -94,7 +94,7 @@ ReactDOM.render(
94
);
95
```
96
97
-[Try it out on Codepen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
97
+[Try it out on CodePen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
98
99
## Keys
100
@@ -136,12 +136,12 @@ We don't recommend using indexes for keys if the items can reorder, as that woul
136
137
Keys only make sense in the context of the surrounding array.
138
139
-For example, if you [extract](/react/docs/components-and-props.html#extracting-components) a `Number` component, you should keep the key on the `<Number />` elements in the array rather than on the root `<li>` element in the `Number` itself.
139
+For example, if you [extract](/react/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the root `<li>` element in the `ListItem` itself.
140
141
**Example: Incorrect Key Usage**
142
143
```javascript{4,5,14,15}
144
-function Number(props) {
144
+function ListItem(props) {
145
const value = props.value;
146
return (
147
// Wrong! There is no need to specify the key here:
@@ -155,7 +155,7 @@ function NumberList(props) {
155
const numbers = props.numbers;
156
const listItems = numbers.map((item) =>
157
// Wrong! The key should have been specified here:
158
- <Number value={number} />
158
+ <ListItem value={number} />
159
);
160
return (
161
<ul>
@@ -174,7 +174,7 @@ ReactDOM.render(
174
**Example: Correct Key Usage**
175
176
```javascript{2,3,9,10}
177
-function Number(props) {
177
+function ListItem(props) {
178
// Correct! There is no need to specify the key here:
179
return <li>{props.value}</li>;
180
}
@@ -183,8 +183,8 @@ function NumberList(props) {
183
const numbers = props.numbers;
184
const listItems = numbers.map((number) =>
185
// Correct! Key should be specified inside the array.
186
- <Number key={number.toString()}
187
- value={number} />
186
+ <ListItem key={number.toString()}
187
+ value={number} />
188
);
189
return (
190
<ul>
@@ -200,7 +200,7 @@ ReactDOM.render(
200
);
201
```
202
203
-[Try it out on Codepen.](https://codepen.io/gaearon/pen/ozJEPy?editors=0010)
203
+[Try it out on CodePen.](https://codepen.io/rthor/pen/QKzJKG?editors=0010)
204
205
A good rule of thumb is that elements inside the `map()` call need keys.
206
@@ -267,8 +267,8 @@ In the examples above we declared a separate `listItems` variable and included i
267
function NumberList(props) {
268
const numbers = props.numbers;
269
const listItems = numbers.map((number) =>
270
- <Number key={number.toString()}
271
- value={number} />
270
+ <ListItem key={number.toString()}
271
+ value={number} />
272
);
273
return (
274
<ul>
@@ -286,8 +286,8 @@ function NumberList(props) {
286
return (
287
<ul>
288
{numbers.map((number) =>
289
- <Number key={number.toString()}
290
- value={number} />
289
+ <ListItem key={number.toString()}
290
+ value={number} />
291
)}
292
</ul>
293
);