From b2b754c425224580fc31f30860c4aec7384de084 Mon Sep 17 00:00:00 2001
From: Aswin <aswin@deducely.com>
Date: Fri, 11 Dec 2020 19:16:48 -0500
Subject: [PATCH] added thing ID to improve readability

---
 .../05-keyed-each-blocks/app-a/App.svelte        |  2 +-
 .../05-keyed-each-blocks/app-a/Thing.svelte      | 16 +++++++++++-----
 .../05-keyed-each-blocks/app-b/App.svelte        |  2 +-
 .../05-keyed-each-blocks/app-b/Thing.svelte      | 12 +++++++-----
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
index 969114428a..d4729c0789 100644
--- a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
@@ -19,5 +19,5 @@
 </button>
 
 {#each things as thing}
-	<Thing current={thing.color}/>
+	<Thing currentColor={thing.color} currentId={thing.id}/>
 {/each}
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
index 28c3c65d05..623336d687 100644
--- a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
@@ -1,14 +1,16 @@
 <script>
 	// `current` is updated whenever the prop value changes...
-	export let current;
+	export let currentColor;
+	export let currentId;
 
 	// ...but `initial` is fixed upon initialisation
-	const initial = current;
+	const initialColor = currentColor;
+	const initialId = currentId;
 </script>
 
 <p>
-	<span style="background-color: {initial}">initial</span>
-	<span style="background-color: {current}">current</span>
+	<span style="background-color: {initialColor}">Initial, Thing Id: {initialId}</span>
+	<span style="background-color: {currentColor}">Current, Thing Id: {currentId}</span>
 </p>
 
 <style>
@@ -16,9 +18,13 @@
 		display: inline-block;
 		padding: 0.2em 0.5em;
 		margin: 0 0.2em 0.2em 0;
-		width: 4em;
+		width: 5em;
 		text-align: center;
 		border-radius: 0.2em;
 		color: white;
 	}
+	p{
+		margin-top: 0.1em;
+		margin-bottom: 0.2em;
+	}
 </style>
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
index 37a19a67a8..090914f59b 100644
--- a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
@@ -19,5 +19,5 @@
 </button>
 
 {#each things as thing (thing.id)}
-	<Thing current={thing.color}/>
+	<Thing currentColor={thing.color} currentId={thing.id}/>
 {/each}
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
index 28c3c65d05..48204dc63c 100644
--- a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
@@ -1,14 +1,16 @@
 <script>
 	// `current` is updated whenever the prop value changes...
-	export let current;
+	export let currentColor;
+	export let currentId;
 
 	// ...but `initial` is fixed upon initialisation
-	const initial = current;
+	const initialColor = currentColor;
+	const initialId = currentId;
 </script>
 
 <p>
-	<span style="background-color: {initial}">initial</span>
-	<span style="background-color: {current}">current</span>
+	<span style="background-color: {initialColor}">Initial, Thing Id: {initialId}</span>
+	<span style="background-color: {currentColor}">Current, Thing Id: {currentId}</span>
 </p>
 
 <style>
@@ -16,7 +18,7 @@
 		display: inline-block;
 		padding: 0.2em 0.5em;
 		margin: 0 0.2em 0.2em 0;
-		width: 4em;
+		width: 5em;
 		text-align: center;
 		border-radius: 0.2em;
 		color: white;