Render a List to a View

[00:00:00]
>> Richard Feldman: So, one of the ways that we can use these concepts, like putting all of the things we just talked about together, is we can think about how to go from a list of names, which is a list of strings, into a list of virtual DOM HTML values.

[00:00:14]
So let's say we have these and we want to, these names and we want to turn them into something rendered on the screen. We want to put them as list items inside an unordered list, where each of them has the text of the particular name. So the goals to go from Erica to a list item that has Erica in it, we can do that by writing a function called viewName.

[00:00:36]
And viewName takes a name, and just returns a li with no attributes and the text of the name. So just by writing this one function, we can then essentially do the same thing for each of those, by calling list.map viewName names. This is essentially doing the same thing we did previously with pluralize, except applying it virtual DOM values rather than strings or numbers, like we did previously.

[00:01:01]
It's the same basic idea, and, again, because in Elm virtual DOM is done by using plain function calls, we don't need to do anything else. There's no special syntax for doing this. List.map works the same way as it does on strings, numbers, and on virtual DOM nodes. Any questions on how that works?

[00:01:20]
>> Speaker 2: Could you use parens in this case for the ul function? Cuz it takes in two arguments.
>> Richard Feldman: Yes, exactly. So if I did not put these parentheses here, then I would be passing U L five arguments. I would be passing it, empty list for its attributes. Then I’d be passing it, the list dot map function, as a second argument, and then view name, as its fourth argument, third argument, and then names is the fourth argument.

[00:01:44]
So, it’d be hashing out, yeah, four arguments instead of two. Whereas with the parentheses, it says, okay, this right here, call list dot map, passing view new names, take the result of that, and pass it as the second argument to U L. Exactly right. Other questions?
>> Richard Feldman: Okay.

[00:02:02]
Excellent, worth noting that the parentheses, as previously noticed, are sort of a key to that working out. And the result of doing this is that, we're going to map each of these into the list items, not just the first one.