diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md index a2eb0f463a..af592f88db 100644 --- a/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md @@ -2,11 +2,11 @@ title: Keyed each blocks --- -By default, when you add an element to the array that the `each` block iterates over, it will add an item at the *end* of the block instead of at the same position as the element's index, and update the attributes of the existing items. This means that if you add an element to the array anywhere other than at the end, this leads to each item corresponding to a different element of the array than the one it was first created for. The same goes for removing an element from the array. That might not be what you want. +By default, when you add an element to the array that the `each` block iterates over, it will add an item at the *end* of the block instead of at the same position as the element in the array, and update the attributes of the existing items. This means that if you add an element to the array anywhere other than at the end, this leads to each item corresponding to a different element of the array than the one it was created for. The same goes for removing an element from the array. That might not be what you want. -It's easier to understand with an example. For each element of the array, #each creates one `` component which you can see as rows. The initial value corresponds to the element of the original array for which the component was created, while the current value shows the element of the current array it corresponds to now. The expected behavior would be that both values match. +It's easier to understand with an example. For each element of the array, #each creates one `` component which you can see as a row. The initial value corresponds to the element of the original array for which the component was created, while the current value shows the element of the array it corresponds to currently. The expected behavior would be that for a component both values always match. -Click the 'Remove first element' button a few times, and notice that it's removing `` components from the end, and updating the prop for those that remain. Instead, we'd like to remove the first `` component and leave the rest unaffected. +Click the 'Remove first element' button a few times. Notice how it's removing `` components from the end and updating the prop for those that remain. Instead, we'd like the button to remove only the first `` component and leave the rest unaffected. To do that, we specify a unique identifier for the `each` block in parentheses: