amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-26 18:58:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert the Number component to ListItem (#8039)

Browse Source 
* Convert the Number component to ListItem

* Add updated example CodePen

Also fixes typos.
This commit is contained in:
Ragnar Þór Valgeirsson
2016-10-22 20:44:28 +00:00
committed by Dan Abramov
parent c0c4ade139
commit 7aab5cf706
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/lists-and-keys.md
View File

@@ -42,7 +42,7 @@ ReactDOM.render(
);
```
[Try it out on Codepen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
[Try it out on CodePen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
This code displays a bullet list of numbers between 1 and 5.
@@ -94,7 +94,7 @@ ReactDOM.render(
);
```
[Try it out on Codepen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
[Try it out on CodePen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
## Keys
@@ -136,12 +136,12 @@ We don't recommend using indexes for keys if the items can reorder, as that woul
Keys only make sense in the context of the surrounding array.
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.
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.
**Example: Incorrect Key Usage**
```javascript{4,5,14,15}
function Number(props) {
function ListItem(props) {
const value = props.value;
return (
// Wrong! There is no need to specify the key here:
@@ -155,7 +155,7 @@ function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((item) =>
// Wrong! The key should have been specified here:
<Number value={number} />
<ListItem value={number} />
);
return (
<ul>
@@ -174,7 +174,7 @@ ReactDOM.render(
**Example: Correct Key Usage**
```javascript{2,3,9,10}
function Number(props) {
function ListItem(props) {
// Correct! There is no need to specify the key here:
return <li>{props.value}</li>;
}
@@ -183,8 +183,8 @@ function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Correct! Key should be specified inside the array.
<Number key={number.toString()}
value={number} />
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
@@ -200,7 +200,7 @@ ReactDOM.render(
);
```
[Try it out on Codepen.](https://codepen.io/gaearon/pen/ozJEPy?editors=0010)
[Try it out on CodePen.](https://codepen.io/rthor/pen/QKzJKG?editors=0010)
A good rule of thumb is that elements inside the `map()` call need keys.
@@ -267,8 +267,8 @@ In the examples above we declared a separate `listItems` variable and included i
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<Number key={number.toString()}
value={number} />
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
@@ -286,8 +286,8 @@ function NumberList(props) {
return (
<ul>
{numbers.map((number) =>
<Number key={number.toString()}
value={number} />
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);