Transcript from the "Using Lists for UI Development" Lesson
[00:00:30] And then that was converted into actual DOM elements, and then they were appended using replace-children to the body and showed up. That visual Dom, we can now make more flexible, we can now enable ourselves to create reusable pieces of it. We can create reusable parts to it. And that's gonna give us the ability to compose, to join up little pieces of UI user interface, that is the combination of content with the back and forth between our user action and the underlying data, and then display it again in our view, that combo.
[00:01:11] And we're gonna move those little units around to build out entire applications and that's where we go now. I starts with our list. There's our list we recognize there. We've got our input, our name, our handle function. We've got our div, our hello, okay? Lists are central to UI development.
[00:01:30] We have a list of two arrays with their element details. In reality, these lists are gonna be 49 long. 49 video elements in a Zoom meeting, 100 tweets on a Twitter timeline. Yeah, which we already had someone hilariously say in the chat. My tweets were less impressive than a wipe-down on the board.
[00:01:51] This feels very rude, but very nice. We need tools for dealing with lists. To apply code functionality to each element, it's gonna be here to take the details of each element and convert them into an actual DOM element. We saw last time to the chagrin of, let's try to use that word correctly, I don't know, I might have used it wrongly, to the chagrin of Ian.
[00:02:33] Well, ain't gonna work here. So we're gonna try and generalize this by instead of manually selecting element zero and one from our virtual DOM in our update DOM method, function, sorry, the converter we are going to map over that list of elements that comes out of running create V DOM.
[00:02:51] Currently, he's got two elements. We're gonna map over it, that is to say we're going to loop and hit each element with the convert function. Our map function, if you've been to a higher-order functions hard parts, you'll recognize it, our map function allows us to hit with a function pass to it.
[00:03:47] So we're gonna introduce our lovely spread operator that's gonna spread out our list into individual arguments that's gonna work with our replaceChildren's design where it expects individual elements, not a list. So here we go. Here we have to apply the map function and to convert an array of elements to individual inputs to pass through a function.
[00:05:05] And that convert function will take in as its input first vDOM position zero. Then it'll run all over again with vDOM position one and if there were vDOM position two, it would hit that one. And the output of each of those will be stored into, here we go, I've got my little comments here.
[00:05:23] Convert runs vDOM 0 push to a new elems array. Convert vDOM 1 push to a new elems array. And unfortunately, he's got a list replaced children's what would that so we're gonna spread out elements into individual arguments. Just for people who are not aware of map, mapping over vDOM is spreading resulting right now.
[00:05:41] Adding new elements doesn't require any new code, that's useful. We can add new elements to this vDOM is gonna require no new code. We're just going to map is flexible to the number of input elements. The map call will handle many elements in the vDOM as there are.
[00:05:55] To add our array of DOM elements, we need to convert them to individual arguments. Spread syntax allows an iterable such as an array expression with string to be expanded. To work with the append method, which can't handle arrays. Can I just say I definitely copied that? Spread Synex allows an iterable such as an array.
[00:06:11] As I read that, I was like, I definitely did not write that, I copied that off the Internet somewhere. All right, okay, it makes sense, right? Spread allows something that can be iterated over like a list to be spread out as an array expression or string to be expanded into individual inputs to be passed to a, in this case, append or replace children methods that can't handle arrays.