Challenge 5: Solution

[00:00:00]
>> Evan: Some of the [INAUDIBLE] that you might have run into is if you use this, you will not be able to access this, this way. Because this is an arrow function and JavaScript arrow functions will use the this of the outer context. It doesn't have its own this, okay?

[00:00:20]
So make sure if you need this, you always need to use the full function declaration. This is the short hand. This is just a short hand of this, if you're not familiar with that. This can be shortened to this, okay? But if you're using this normal function declaration, then you need to remember to return it.

[00:00:42]
Because you no longer have the implicit return of the arrow functions. So what we need to do, obviously, this should accept a tags prop. So we're gonna skip all the other thing. Just use the most simple syntax so that we can access it inside our render functions. Now you can access this.tags here, it should be an array of strings.

[00:01:07]
We'll just assume it's always an array of strings and we'll not care about validation or anything. The cool thing is that we're rendering, so we're rendering a list of the things. Essentially, we have a route that is a div, obviously, and it should have a list of children elements.

[00:01:28]
So one easy way to think about this is like we want something like this. But notice that these tags will be coming from the tags dynamically, and we don't really know how long this array is gonna be, right? So you have to construct this children array programatically. So we can just map it, right?

[00:01:50]
So because it's an array and const children, like this. I'll just do this, right? So question is, how do we do this, right? So when we map it, for each tag, we're gonna create a corresponding virtual node. So what we will be returning is an h call. And obviously, this h call would just create this tag.

[00:02:24]
And remember, another requirement for the test to pass is that each of these elements should render the current index in the array. So to get that index, the map function, the iterator pass through the map function takes a second argument, which is the index. As you can see, VS code is nicely hinting the function syntax for me.

[00:02:50]
And we can use that, we can pass that number directly into the h function, and we're done. So this is pretty much it, and in fact, we can just copy this here to make it a one-liner.
>> Evan: And this should suffice. Let's run a test.
>> Evan: And it fails, of course, so hmm,

[00:03:27]
>> Evan: Says what, failed to, right, because I didn't register the component. Wait, no, I did.
>> Speaker 2: You ran 3.2.
>> Evan: What?
>> Speaker 2: Didn't you run the 3.2 test?
>> Evan: This is the 3.1 test, okay, wrong test, yes [LAUGH] actually works, okay. All right, so I hope this sort of gets you sort of familiarized with how render functions work.

[00:03:55]
Everything is just JavaScript. When you need to return something, remember they need to be virtual nodes or text. Or in this case, we can actually pass numbers, too. They get casted into strings.
>> Evan: And you can optionally omit this data object. And if you want this thing to have attributes, you need to do something like this to give you an ID.

[00:04:23]
So this is all hopefully self-explanatory enough.