Transcript from the "each & Keyed each Blocks" Lesson
[00:00:00]
>> So in most web applications, you're gonna need to loop over a list of data at some point. Here we have a list of data of the celebrated cats of YouTube. And the way that we can loop over them in a spelt component is with the each block and that looks a little bit like this.
[00:00:21] Each cats is cat and then close it with the slash again and that renders our list. So this cat variable is being created by the each block and then you can use that inside it to pull out cat.id to this property here in cat.name. Often you'll also need to get the index of the current element and so in the same way that you would have a second argument if you were using array.map or array.foreach, you can do the same thing here.
[00:01:01] So comma i. And then down here, we can do i + 1, colon. And then the cats are numbered. We can also use destructuring inside here the same way that you could in a regular JavaScript function. So instead of passing through this cat value, we can destructure it into its component properties, ID and Name, and then replace the references to cat with the values directly, like so.
[00:01:44] Now, keyed each blocks are a little bit harder to explain so bear with me. What happened before was that we created a list and then if that list were to change, it would always add items at the end of the list or remove items from the end of the list.
[00:02:00] It wouldn't remove items from the middle of the list or add items in the middle of the list. And that is sometimes a problem. So in this component, in this thing dot svelte we're exporting a value called current. But we're also creating a value called initial, which is fixed to the value of current when the component is first instantiated.
[00:02:24] And we're doing that so that we can demonstrate something that goes wrong when you're using a regular each block. If we remove the first item from this array, and this is what a block looks like. We have a thing component, and we're passing thing.color. Then the current value is changing.
[00:02:46] It's passing through the second, third, fourth, and fifth values to the components. And now the third, fourth, and fifth, and now the fourth and fifth. But the components themselves have the first value and the second value, and that's obviously wrong because we want those two things to match.
[00:03:04] What we want when we remove the first thing is for the first component to get taken out, and for the second, third, fourth, and fifth to stay where they are. Rather than removing the fifth component and then the fourth component and then the third component, and then changing the data inside them.
[00:03:19] And to do that we use the keyed each block. And the way that that works is inside the each block opening tag, we specify a way of identifying each item uniquely. Put that inside parentheses, like so, thing.ID. And now when you remove the first thing, instead of removing the last item and then changing the data in all of the others, it's actually going to remove the first thing component, and so the colors will continue to match.
[00:03:50] And this becomes particularly important when you start using element transitions on items inside each blocks. It's also generally more efficient if you have this type of data that's changing because cell is able to remove blocks that no longer exist and leave other components untouched rather than having to update everything past the point at which the array changed.