docs: update Keyed Each Blocks tutorial (#6358)

site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte

@@ -2,11 +2,11 @@
 	import Thing from './Thing.svelte';
 
 	let things = [
-		{ id: 1, color: 'darkblue' },
-		{ id: 2, color: 'indigo' },
-		{ id: 3, color: 'deeppink' },
-		{ id: 4, color: 'salmon' },
-		{ id: 5, color: 'gold' }
+		{ id: 1, name: 'apple' },
+		{ id: 2, name: 'banana' },
+		{ id: 3, name: 'carrot' },
+		{ id: 4, name: 'doughnut' },
+		{ id: 5, name: 'egg' },
 	];
 
 	function handleClick() {
@@ -19,5 +19,5 @@
 </button>
 
 {#each things as thing}
-	<Thing current={thing.color}/>
+	<Thing name={thing.name}/>
 {/each}

site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte

@@ -1,24 +1,32 @@
 <script>
-	// `current` is updated whenever the prop value changes...
-	export let current;
+	const emojis = {
+        apple: "🍎",
+        banana: "🍌",
+        carrot: "🥕",
+        doughnut: "🍩",
+        egg: "🥚"
+	}
+
+	// the name is updated whenever the prop value changes...
+	export let name;
 
-	// ...but `initial` is fixed upon initialisation
-	const initial = current;
+	// ...but the "emoji" variable is fixed upon initialisation of the component
+	const emoji = emojis[name];
 </script>
 
 <p>
-	<span style="background-color: {initial}">initial</span>
-	<span style="background-color: {current}">current</span>
+	<span>The emoji for { name } is { emoji }</span>
 </p>
 
 <style>
+	p {
+		margin: 0.8em 0;
+	}
 	span {
 		display: inline-block;
-		padding: 0.2em 0.5em;
-		margin: 0 0.2em 0.2em 0;
-		width: 4em;
+		padding: 0.2em 1em 0.3em;
 		text-align: center;
 		border-radius: 0.2em;
-		color: white;
+		background-color: #FFDFD3;
 	}
-</style>
+</style>

site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte

@@ -2,11 +2,11 @@
 	import Thing from './Thing.svelte';
 
 	let things = [
-		{ id: 1, color: 'darkblue' },
-		{ id: 2, color: 'indigo' },
-		{ id: 3, color: 'deeppink' },
-		{ id: 4, color: 'salmon' },
-		{ id: 5, color: 'gold' }
+		{ id: 1, name: 'apple' },
+		{ id: 2, name: 'banana' },
+		{ id: 3, name: 'carrot' },
+		{ id: 4, name: 'doughnut' },
+		{ id: 5, name: 'egg' },
 	];
 
 	function handleClick() {
@@ -18,6 +18,6 @@
 	Remove first thing
 </button>
 
-{#each things as thing (thing.id)}
-	<Thing current={thing.color}/>
+{#each things as thing (thing.id) }
+	<Thing name={thing.name}/>
 {/each}

site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte

@@ -1,24 +1,32 @@
 <script>
-	// `current` is updated whenever the prop value changes...
-	export let current;
+	const emojis = {
+        apple: "🍎",
+        banana: "🍌",
+        carrot: "🥕",
+        doughnut: "🍩",
+        egg: "🥚"
+	}
+
+	// the name is updated whenever the prop value changes...
+	export let name;
 
-	// ...but `initial` is fixed upon initialisation
-	const initial = current;
+	// ...but the "emoji" variable is fixed upon initialisation of the component
+	const emoji = emojis[name];
 </script>
 
 <p>
-	<span style="background-color: {initial}">initial</span>
-	<span style="background-color: {current}">current</span>
+	<span>The emoji for { name } is { emoji }</span>
 </p>
 
 <style>
+	p {
+		margin: 0.8em 0;
+	}
 	span {
 		display: inline-block;
-		padding: 0.2em 0.5em;
-		margin: 0 0.2em 0.2em 0;
-		width: 4em;
+		padding: 0.2em 1em 0.3em;
 		text-align: center;
 		border-radius: 0.2em;
-		color: white;
+		background-color: #FFDFD3;
 	}
-</style>
+</style>

site/content/tutorial/04-logic/05-keyed-each-blocks/text.md

@@ -4,16 +4,18 @@ title: Keyed each blocks
 
 By default, when you modify the value of an `each` block, it will add and remove items at the *end* of the block, and update any values that have changed. That might not be what you want.
 
-It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice that it's removing `<Thing>` components from the end and updating the `color` for those that remain. Instead, we'd like to remove the first `<Thing>` component and leave the rest unaffected.
+It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice what happens: It removes the first `<Thing>` component, but the *last* DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji. 
 
-To do that, we specify a unique identifier for the `each` block:
+Instead, we'd like to remove only the first `<Thing>` component and its DOM node, and leave the others unaffected.
+
+To do that, we specify a unique identifier (or "key") for the `each` block:
 
 ```html
 {#each things as thing (thing.id)}
-	<Thing current={thing.color}/>
+	<Thing name={thing.name}/>
 {/each}
 ```
 
-The `(thing.id)` tells Svelte how to figure out what changed.
+Here, `(thing.id)` is the *key*, which tells Svelte how to figure out which DOM node to change when the component updates.
 
 > You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.