Manipulating Values Solution

[00:00:00]
>> Richard Feldman: All right, so first thing we're gonna do, is we're gonna use list.map and view tag, to render the tags. So we've got tags coming in here as an argument. That's gonna be a list of string, and we're wanna replace this thing with actual rendered tags. So I'm gonna do that.

[00:00:13]
I'm gonna call this .map and then list.map, the first argument that it accepts is a function to run on each element of the list. So we're gonna call a viewTag, here. That's gonna be the function that we pass into the stock map. And the other argument, is going to be the actual list itself, which in our case is just called tags.

[00:00:29]
So this is going to run through those tags, and then on each one, it's going to call view tag. And it's going to transform that list, such that the new list, has the result of calling view tag on each of those tags, as the actual rendered ones. Which means that, it's really important that rendered tags.

[00:00:45]
Because, It's being used here as a list of virtual DOM nodes. That it actually, returned a virtual dom node in the view tag function. So this should return a single one which it currently does. It just returns an empty button, which is pretty boring. But we wanted to render a more interesting button like this.

[00:01:03]
So, let's call button, passing again a class and that's gonna be just the one attributed in there. And then here, we wanna put the actual tag name. Which like we did before, is gonna be text tagName. So, tagName is coming in as a string. Now we wanna turn that into a DOM node, a text node, so we're gonna call it text on it.

[00:01:26]
Okay, So now we have viewTag done, we have viewTags done. The last step, is that in order to actually make them get used, we need to call viewTags, passing the actual tags instead of this empty list right here. So we have tags defined up here in this let expression inside main, so all we have to do is save tags.

[00:01:45]
There we go. By the way, you saw that that code jumped up there a little bit, that's elm-format at work, I have elm-format configured to run on save. So, if I mess all these things up and add a bunch of extra white space, and nonsense like that, every time I save it, it all just snaps back into place.

[00:02:00]
So highly recommend using elm-format and setting it to format on save, makes life really nice. All right, let's recompile this, and see what it looks like. Bam, now we have some tags. Excellent.