Complete Introduction to React (feat. Redux and React Router) Populating the Search Page
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
>> 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.
>> Brian: This is the shows array, right?
>> 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: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.
>> 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.
>> 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.