This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Rendering List of Components" Lesson
[00:00:00]
>> Brian Holt: What we wanna do actually, is we want to render out all of our animals. So what we're gonna do is we're gonna put this inside of a div, and we're gonna say this.state.pets, right, this is the array of pets that we have. And then we're gonna do a map, .map.
[00:00:24] Now map is a JavaScript function, it's built onto array. So any array can do a .maps, so this not something specific to React. What we have is we have an array of pet data, and we wanna turn that into an array of pet components. So if you're familiar with functional programming, if you're transforming one array of things into an array of different things, the operator to do that is map.
[00:00:51] You're mapping this one into a different one. And if you want more information on that, there's lots of really, really good functional programming courses on for the masters. Both Kyle Simpson's and Brian Lawnstar's are A plus in my opinion. So that's what we're gonna do here. We're gonna take this array of pet objects and transform them into an array of pet data, or sorry pet data and turn it into an array of pet components.
[00:01:18] And if you remember when we were doing the react.create element costs the last thing that we could provide it was an array of components, right. So that's all we're doing here, we're just providing another array of components.
>> Brian Holt: So what we're gonna do now is we're going to do pet, right.
[00:01:43] This is gonna be in a pet object, this function's going to be run on every single item in the array. In fact, it might be useful to just demonstrate to you here.
>> Brian Holt: If I have a const numbers = [1,2,3,4], okay. So now I have numbers and I'm gonna say numbers.map, number and I return two times number.
[00:02:20]
>> Brian Holt: This function down here, this is probably hard to see, but this function right here is going to be run every single time in the array. So in this case, this function here is going to be run four times, cuz there's four items in the array. And I'm going to get a new array of whatever that results in.
[00:02:37] So here I have two, four, six, eight, because that function doubled everything in the array. So that's all we're doing here. In that case we're just transforming one set of numbers to another set of numbers but we're going to transform data objects into components.
>> Brian Holt: So here we're going to return,
[00:02:59]
>> Brian Holt: A pet component.
>> Brian Holt: And animal is gonna be equal to pet.animal.
>> Brian Holt: Name is gonna be equal to pet.name. And breed is gonna be equal to breed. Another fun thing here is sometimes these animals have one breed, and sometimes they have two breeds, and so you have to make sure that you're getting all of the breeds captured.
[00:03:32] So what we're gonna do up here is we're gonna say, let breed.
>> Brian Holt: Or if Array.isArray.
>> Brian Holt: Pet.breeds.breed.
>> Brian Holt: Then you're gonna say breed = pet.breeds.breed.join comma space, right. So if it's like German Shepherd poodle, one it's a weird looking dog but two it would be GermanShepard, space, poodle would be one stream, that's kind of our goal here.
[00:04:12] Otherwise, if it's not, and it's just one breed then we just want it to be equal to breed equals pet.breeds.breed
>> Brian Holt: Okay, it's gonna be yelling at you for a second. I will talk about keys momentarily, but now I'll give you a second to catch up. But now what we should do is rather than seeing that whole list of JSON just being spat onto the DOM, we should actually see that same structure that we saw with Luna before, right.
[00:04:47] But it'll be all the dogs from the API.
>> Brian Holt: Nope, pets is not defined.
>> Speaker 2: Plural and that is array condition, you're saying that.
>> Brian Holt: Thank you, perfect. So now you can see there's all these dogs that are coming back from the pet finder API, right, which is pretty cool.
[00:05:20] We're actually working with real data now.
>> Brian Holt: Questions? I'll talk about keys here in just a second. So you will be seeing errors over here, and I'll address that in a second.