diff --git a/guide/english/react/keys/index.md b/guide/english/react/keys/index.md new file mode 100644 index 00000000000..f8b3b70f2c6 --- /dev/null +++ b/guide/english/react/keys/index.md @@ -0,0 +1,29 @@ +--- +title: Keys +--- + +# Keys + +Keys are the eyes and ears on your application battlefield letting React know which items have changed or were added. +```javascript +const bestCereal = ['cookie crisp','waffle crisp','fruit loops','cinnamon toast crunch','cocoa puffs']; +const cerealItems = bestCereal.map((cereal) => + +); +``` +Notice that the keys selected were all unique. The `key` is required to be unique. If you are unable to provide a unique key from the list of items you are iterating over, you can use the `index`. +```javascript +const troops = ['general','major','platoon leader','cadet','cadet']; +const troopItems = troops.map((soldier, index) => + +); +``` +Although it is not recommended to use index if the order of items change. Many in the React community use index as a last resort. + +### More Information +- [Keys Doc](https://reactjs.org/docs/lists-and-keys.html) +- [Dangers of Using Index as the Key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)