Check out a free preview of the full Complete Intro to React, v5 course:
The "Passing in Component Props" Lesson is part of the full, Complete Intro to React, v5 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates how to create and pass in attributes to components.

Get Unlimited Access Now

Transcript from the "Passing in Component Props" Lesson

[00:00:00]
>> Brian Holt: So I wanna make this more flexible so that I can have a different name, I can have a difference type of animal, and I can have a different breed, right? So what I wanna do is I wanna pass attributes into the pet component which we kinda already saw a little bit earlier with this ID thing, right?

[00:00:16] This is how you pass it into like a div and we can use the same methodology to pass information into the pet component. So what I'm gonna do here, I'm gonna use multiple cursors with a VS code. So I'm gonna click and then hold alt, and click again underneath it like that.

[00:00:36] And now I can write in three different places at once. So I'm gonna hit comma, and then I'm gonna pass in a name which for now is going to be Luna. A animal which is gonna be a dog and the breed, which is gonna be lavanese. And then I'm gonna had that reorganized so it's little bit easier to read

[00:01:10]
>> Brian Holt: Okay, so now this information is being passed down. Now I'm gonna change this so they're not all Luna. Let's make this one my bird from growing up, which who's name was Pepper, and Pepper was a cockatiel. And we're gonna name this after my friend's cat which is the most amusing name I've ever heard for a cat which is Doink.

[00:01:34] Doink is mostly blind, so Doink just kind of runs into walls and Doinks the wall, hence the name. Doink is a cat and the breeds like stray or mixed or something like that we'll go with mixed.
>> Brian Holt: Okay, so now all this information is being passed into the pet component, but we have to use it, we're not using it yet anywhere.

[00:02:03] So what this does is it takes this information and it passes it in as a parameter here called props.
>> Brian Holt: So instead of saying Luna here, I'm gonna say props.whatever I called this here, which is props.name. So instead of saying dog here, I'm gonna say props
>> Brian Holt: Instead of saying dog here, I'm gonna say props.animal is what I called it, okay?

[00:02:31] And then here, I'm gonna say props.breed. So now what do I expect to see when I go look at the browser? It's gonna look relatively the same, except I'm gonna have three different pets instead of Luna three times, right?
>> Brian Holt: So if I refresh the page, you can see here that I have Luna, Pepper, and Doink.