A key identifies an element among its siblings when React renders a list. React uses it to recognize whether an element moved and reuse it instead of deleting and recreating every element. section 3.2.8
Use keys when mapping data to JSX:
- Put the key on the root JSX element returned by the map callback. section 3.2.8
- Choose a unique identifier for the element rather than the array index, because indexes change when elements move. section 3.2.8
- Keep keys unique among siblings; missing or duplicate keys produce console warnings. section 3.2.8
- Use the explicit Fragment component when each mapped item returns multiple sibling elements and needs a key. section 3.2.9
Keyed select options
const items = ["apples", "pears", "playstations"]; <select> {items.map((item) => ( <option key={item}>{item}</option> ))} </select> Here, each option uses its item value as a unique key. The key helps React reuse the corresponding option when the list renders again, but it is an internal React property and is not rendered into the DOM. section 3.2.8
Listing 3.12 Definition list of dog breeds
import { Component, Fragment } from "react";
class App extends Component {
render() {
const list = [
{ breed: "Chihuahua", description: "Small breed of dog." },
{ breed: "Corgi", description: "Cute breed of dog." },
{ breed: "Cumberland Sheepdog", description: "Extinct breed of dog."},
];
return <Breeds list={list} />;
}
}
class Breeds extends Component {
render() {
return (
<dl>
{this.props.list.map(
({ breed, description }) => ( #1
<Fragment key={breed}> #2
<dt>{breed}</dt>
<dd>{description}</dd>
</Fragment>
)
)}
</dl>
);
}
}
export default App;
Browse a keyed Fragment example that renders each dog breed as a paired <dt> and <dd> without adding an extra DOM wrapper. section 3.2.9
