This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Populating the Search Page" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian: So now we're gonna start making search actually somewhat useful. So I come now to search.JSX.
>> Brian: And what we are gonna do here is make this a div. className = container,
>> Brian: [COUGH] And this is one of my favorite cool features about ReACT. The first time I fell in love with Angular was when I saw ng-repeat for the first time, like it's just the killer feature.
[00:00:42] My God, I don't have to create all these elements myself, I can just let Angular take care of it for you. Well, I'm about to show you the Angular or the ng-repeat or the pound each of ReACT right now so I'm gonna say data.shows.map((show). So again, remember everything in here is just a JavaScript expression, right, and then data.shows, right, if you look at our data.json.
[00:01:22]
>> Brian: This is the shows array, right?
>> Brian: And then map, that's just a plain old JavaScript, right? That's not a ReACT-specific function. So you can even go look, mdn array map.
>> Brian: This is an ES5 function that basically it's more functionalesque programming. Actually it's very functional programming. I use map everywhere in functional programming.
[00:01:49] And you basically take in an array. You apply some transformation to every item in the array. So basically this function that we're providing for it is going to get applied to every single individual item in the array and it's going to create a new array full of everything that you return from your map function, right.
[00:02:10] So just as a very basic. Yeah, did you have a question?
>> Speaker 2: There was a question on why you were using data.shows instead of just shows there.
>> Brian: Yeah. Why don't you call this data instead? [LAUGH] Cuz otherwise, it's gonna be shows.shows, which is weird, right? Sorry, my bad.
[00:02:30] Okay, so I just wanted to brief primers map, if I have a bar x equals 1,2,3,4,5, right? And I say, const y = x.map(function(num) [ return x * 10 ] ) right or something like that. Yeah, thank you. What you're going to get back here is 10, 20, 30, 40, 50, right?
[00:03:08] So it's gonna take this function and apply it individually to every single item in the array. And whatever you return is going to be put into the array, right? So in this particular case, it's gonna do it times 10 here, times 10 here. So this function gets run 5 times on each individual item in the array.
[00:03:26] Does that makes sense? Is that a good basic primer into what map is? Okay, so suffice to say that this is not ReACT specific. This is something you can use everywhere in JavaScript. Excuse me [COUGH]
>> Brian: And that's one of my favorite parts about ReACT is like most of the ReACT statements, this is just good JavaScript, right?
[00:03:54] This isn't like you didn't have to learn ng-repeat and all the different syntaxes of doing ng-repeat. Like you just have to know how to do a bit more JavaScript. And everything that you're learning here doesn't just apply to ReACT, it applies to everything in JavaScript. I think that's just a sign of a good design of a framework.
[00:04:12] Okay, so this function here, all we have to do is return ReACT components, right, cuz if you imagine what's happening underneath the hood, what it's being transpiled to, this is going to just be transpiled to an array of different different components, right. And ReACT knows what to do with an array of components, right.
[00:04:30] Does that make sense? So here, if I just say return <h3>[show t}, I'm now going to have an array of h3s, right, of these different titles in there and ReACT knows what to do with that.
>> Brian: Now if you wanna make this extra clever again, and we don't want this return statement in here, we can do the same thing that we're doing up here, and just turn these into parentheses.
[00:05:05] And that works as well.
>> Brian: Does that make sense?
>> Brian: If that's too clever for you, feel free just to stick to that version of it. And I'm okay with that, too. Or you can just do function, right, and that's okay, too, whatever floats your boat. Stand up for a little bit.
[00:05:59]
>> Brian: Okay, I'll turn that into,
>> Brian: Yeah, so let's save that.
>> Speaker 2: Don't you need to drop the return?
>> Brian: I do need to drop the return or else that's not going to compile.
>> Brian: We got a bunch of, so yeah, you need to get rid of all this stuff up here.
[00:06:25]
>> Brian: And that got rid of all of our Lint, great.
>> Brian: So now refresh this page and click Browse All and notice that we're getting a list of all the titles now, right?
>> Brian: Does that makes sense or is this to hand-wavy black magic? Or do we mostly follow how we got to getting titles here in our ReACT project?
[00:06:57] It's okay if someone says this is too hand-wavy, I can go explain it again.
>> Brian: Yeah.
>> Speaker 3: So in my console, I'm getting a unique key error for ReACT. Is that something we're gonna cover at some point?
>> Brian: Yeah, we're gonna cover that briefly here in just a second.
[00:07:11] Yes, you'll definitely see here, each child needs a key. And we'll talk about that momentarily.