From 95e541882cfeb272726f11e5f720a4d2b2de7df9 Mon Sep 17 00:00:00 2001
From: KurtWayn3 <kurtwgardner@gmail.com>
Date: Sun, 10 Feb 2019 20:32:24 -0700
Subject: [PATCH] Add Keys with Examples (#32942)

* Add Keys with Examples

* fix: added front matter block
---
 guide/english/react/keys/index.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 guide/english/react/keys/index.md

diff --git a/guide/english/react/keys/index.md b/guide/english/react/keys/index.md
new file mode 100644
index 0000000000..f8b3b70f2c
--- /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) =>
+  <ul key={cereal}>
+    {cereal}
+   </ul>
+);
+```
+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) =>
+  <ul key={index}>
+    {soldier}
+   </ul>
+);
+```
+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)