From 7bf2069e9d1adaec4fd9fa286eef657c2625b349 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20H=C3=B6ltje?= Date: Tue, 23 Jan 2024 15:50:14 -0500 Subject: [PATCH] Clarify the items in the each needing ids/keys (#446) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Clarify the items in the each needing ids/keys Try to clarify that it is updating the DOM/components after deleting the last item. For some reason, I read this as changing the array itself by removing the last item. I suspect my changes need to be slimmed down and edited. Yes, I am neuro-divergent. Why do you ask? 😃 * Apply suggestions from code review --------- Co-authored-by: Rich Harris --- .../04-logic/05-keyed-each-blocks/README.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md index 9f8688a0e..a87e34367 100644 --- a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md @@ -2,13 +2,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. +By default, when you modify the value of an `each` block, it will add and remove DOM nodes 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 what happens: it does not remove the first `` component, but rather the _last_ DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji, which is fixed when each `` is created. +It's easier to show why than to explain. The `` component sets the emoji as a constant on initialization, but the name is passed in via a prop. + +Click the 'Remove first thing' button a few times, and notice what happens: + +1. It removes the last component. +2. It then updates the `name` value in the remaining DOM nodes, but not the emoji, which is fixed when each `` is created. Instead, we'd like to remove only the first `` component and its DOM node, and leave the others unaffected. -To do that, we specify a unique identifier (or "key") for the `each` block: +To do that, we specify a unique identifier (or "key") for each iteration of the `each` block: ```svelte /// file: App.svelte @@ -17,6 +22,6 @@ To do that, we specify a unique identifier (or "key") for the `each` block: {/each} ``` -Here, `(thing.id)` is the _key_, which tells Svelte how to figure out which DOM node to change when the component updates. +Here, `(thing.id)` is the _key_, which tells Svelte how to figure out what to update when the values (`name` in this example) change. > 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.