This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Passing Component Props" Lesson
[00:00:00]
>> Brian Holt: So I wanna make it, so that this pet component can be used for multiple different pet types, right? I don't want it to just be useful for Brian's pet, right. So what we're going to do is we're going to make this a little bit more flexible. So what we're going to do is we're going to have pet.
[00:00:18] Take into something called props. So these are gonna be properties that are gonna be passed from the parent component. The parent component being app in this case. To the child component which in this case will be Pet, right? So we're gonna accept props from the parent. And rather than say, lunar right here we're gonna say, props.name, right?
[00:00:45] So we're gonna pass from the parents, a name prop which is going to be rendered out instead of just luna directly. Same here, we're gonna say, props.animal and here it's gonna be, props.breed, so that's a start. Now, we have made this a lot more flexible that it can represent any pet.
[00:01:12] And here, I'm going to actually do this all at once. We're going to add these props are gonna be passed in. So I am going to say name, Luna, animal, she is a dog, and breed she is a habanies. But now, we can have it represent not just luna but we can have it represent other animals.
[00:01:52] So this is gonna be, this is my bird growing up. She's a cockatiel.
>> Brian Holt: And this is my neighbor's cat. So she named her cat Doink. I don't really understand that. I think, it's cuz the cat's mostly blind and just runs into walls. It's an adorable cat. And she's a mixed breed of some sort.
[00:02:17] But name it whatever pets you feel like naming it, right?
>> Brian Holt: So now, what do you expect to see? Rather than having Luna, dog, Havanese, now we're gonna have Luna, dog, Havanese for the top one. But we're gonna have Pepper, bird, Cockatiel underneath that and Doink, cat, mixed underneath that.
[00:02:35] So if I save this and come back over here and refresh the page, you'll see now that we have this flexible pet component that's rendering out different things. So now, it has become a lot more flexible. Now, this is actually starting to seem a little bit more useful than just rendering out mark up.