From 02a91356c0d7d41cef56b41102d9009dd51fb22b Mon Sep 17 00:00:00 2001
From: spacejack <spacejack@users.noreply.github.com>
Date: Wed, 10 Jul 2019 07:35:56 -0400
Subject: [PATCH] Keys docs indent fix, additional edits for clarity (#2459)

* Keys docs indent fix, additional edits for clarity

* Another indent fix

* Add comma
---
 docs/keys.md | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/docs/keys.md b/docs/keys.md
index de9076a4..6a49de1f 100644
--- a/docs/keys.md
+++ b/docs/keys.md
@@ -124,8 +124,8 @@ If you refactor the code and make a user component, the key must be moved out of
 var User = {
 	view: function(vnode) {
 		return m("div", { key: vnode.attrs.user.id }, [
-      m(Button, vnode.attrs.user.name)
-    ])
+			m(Button, vnode.attrs.user.name)
+		])
 	}
 }
 
@@ -174,7 +174,7 @@ var things = [
 
 #### Avoid mixing keyed and non-keyed vnodes in the same array
 
-An array of vnodes must have only keyed vnodes or non-keyed vnodes, but not both. If you need to mix them, create a nested array.
+An array of vnodes must have only keyed vnodes or non-keyed vnodes, but not both. In fact, this will cause an error to be thrown to remind you to not do it. So don't do it!
 
 ```javascript
 // AVOID
@@ -182,14 +182,20 @@ m("div", [
 	m("div", "a"),
 	m("div", {key: 1}, "b"),
 ])
+```
+If using keys, use a unique key for every element.
 
+```javascript
 // PREFER
 m("div", [
 	m("div", {key: 0}, "a"),
 	m("div", {key: 1}, "b"),
 ])
+```
 
+If you need to mix them, create a nested array.
 
+```javascript
 // PREFER
 m("div", [
 	m("div", "a"),
@@ -199,9 +205,21 @@ m("div", [
 ])
 ```
 
-In fact, this will cause an error to be thrown, to remind you to not do it. So don't do it!
+Note that `null`s, `undefined`s and booleans are considered unkeyed nodes. If you want the keyed equivalent, use `m.fragment({key: ...}, [])` which is a keyed empty fragment.
 
-Note that `null`s, `undefined`s, and booleans are considered unkeyed nodes. If you want the keyed equivalent, use `m.fragment({key: ...}, [])`, a keyed empty fragment.
+```javascript
+// AVOID
+m("div", [
+	a ? m("div", {key: 1}, "a") : null,
+	m("div", {key: 2}, "b"),
+])
+
+// PREFER
+m("div", [
+	a ? m("div", {key: 1}, "a") : m.fragment({key: 1}, []),
+	m("div", {key: 2}, "b"),
+])
+```
 
 #### Avoid passing model data directly to components if the model uses `key` as a data property