Complete Intro to React v4 Passing Component Data Using Props

Transcript from the "Passing Component Data Using Props" Lesson

[00:00:00]
>> Brian Holt: This isn't very pretty. We have a rich amount of data about these animals. It would be really cool if we could show pictures and those sorts of things. So what we're gonna do is we're gonna go back to pet.js and we're gonna make it actually display more things now.

[00:00:17]
>> Brian Holt: So-
>> Brian Holt: Let's do this. So in theory, if you follow my styling or my structure of my HTML and class names, you should get all of the styling for free because of the CSS that I gave you. So go ahead and just delete all of this. Let's ay class Pet extends React.Component.

[00:00:44] Something that I didn't mention before but I should mention now. Every React class component has to have a render method, 100% of the time it must have a render method.
>> Brian Holt: The render method-
>> Brian Holt: Has to return markup, right? Like the result of a React.createElement call. That's kind of the contract that you have with React.

[00:01:10]
>> Brian Holt: The other thing is that it should have no side effects, which means that you shouldn't modify any ambient state, you can't call set state within render. It has to be fast, because render is gonna get called a lot, it's a very, very hot code path, so you should be very cautious to make render very quick.

[00:01:28] Otherwise, it'll get slowed down pretty quickly. Okay.
>> Brian Holt: Name, animal, breed, media.
>> Brian Holt: This.props. Here we're doing a bit of destructuring. So we're gonna get props called name, animal, breed, media and location form the parent. Because we will go do that later, we'll go make it give us those things later.

[00:02:08] But for now we can expect those things coming in from the parent. These are basically the required parameters to render this correctly, okay? And we know it's gonna be called there, so this is called Destructing. We're pulling these things out. So now I have, if I did console.log[name], right?

[00:02:25] It would be basically the same as this console.log(this.props.name), right? All right, those two things are kind of equivalent, that's what destructuring does for you. It's just a really easy way to pull things out of an object. If you already know what the names are gonna be.
>> Brian Holt: Okay?

[00:02:46] And we're gonna have to do some more finagling with the photos cuz they come back in kind of a weird thing. So let photos =[], if (media && media.photos && media.photos.photo)
>> Brian Holt: The nice thing is we know this is always going to be an array, that we don't have to check to see if it's a single photo or not.

[00:03:22] But they give us multiple different sizes of each photo. So they'll give you the thumbnails, and it's all in the same array, which is annoying, but that's okay. So we're gonna say photos = media.photos.photo.filter. So, filter is like math, it runs the same function in every single item in the array.

[00:03:43] If it returns true, it stays in the array. If it returns false, it kicks it out of the array. So we're just going to filter, because we just want one size of the photo, right? We don't want to have the same photo multiple times for each animal. So photo, photo, and the name of thing is @size.

[00:04:05]
>> Brian Holt: And we want pn.
>> Brian Holt: So this will keep only one size of the photos for us so then we can just display that one.
>> Brian Holt: So now we know photos is going to be an array of photos, we don't have to worry about if it's empty or not.

[00:04:26]
>> Brian Holt: Okay, and then down here, we're going to return div className equals "pet".
>> Brian Holt: And div className = "image-container".
>> Brian Holt: And then here we're gonna put image src = photos

[0].value which is actually gonna be the URL that it needs.
>> Brian Holt: So here's something that I quite like about our, yes, centrals that we set up.

[00:05:15] It's gonna mark me right now and say, hey, something's wrong with image. And if you mouse over here, it's like, if you have an image tag, you have to give it an alt, right? So that screen readers know what the image is, right? Because if someone's blind and trying to look at your website, and then you just put an image there that's important to the content, the screen reader's is gonna miss it.

[00:05:33] Which means that the blind person doesn't get to fully experience your website. So, again, you have to give it an alt here.
>> Brian Holt: And we're just gonna give it the name of the animal.
>> Brian Holt: Okay? Div className="info".
>> Brian Holt: H1 with a name.
>> Brian Holt: H2 with-
>> Brian Holt: Animal
>> Brian Holt: M- breed

[00:06:23]
>> Brian Holt: Location
>> Brian Holt: Okay? So now our pet component looks a lot nicer. Now, we just have to go into our app and make sure that we are passing down all the correct data so that we can render this pet correctly.
>> Brian Holt: So let's go into app.js, we just need to pass a couple more things.

[00:06:59] Media=[pet.media]. And, location=, and we're gonna give it, this is called a template string. So these are called back ticks, which is the one to the left of 1 on your keyboard if you're using an American keyboard. So back tick.
>> Brian Holt: I guess you don't have to do it, no, you do, okay.

[00:07:30]
>> Brian Holt: So your gonna do [pet.contact.city], [pet.contact.state].
>> Brian Holt: So with template strings just so you see it outside of JSX, if I was doing like const x = 'My dog's breed is $[breed], right? So this will actually, it's the same kinda thing with JSX, but it's actually putting that actual variable into the template string, right there.

[00:08:11] That's how that works. So that's what that dollar sign, curly braces for template strings. It's a JavaScript thing, it's not a React thing.
>> Brian Holt: So this is going to be city, state, right? That's what we've done there with the template string.
>> Brian Holt: Okay, so let's go take a look and make sure that we kinda got what we were looking for.

[00:08:33] And you can see now, we have various animals coming in.
>> Brian Holt: Pretty cool, right? Now, we have animals.
>> Brian Holt: Any questions?
>> Brian Holt: I see a lot of perplexed faces.
>> Brian Holt: Yeah, Mark?
>> off screen male: How many props should we pass into a component before we start using an object instead?

[00:09:08] Or is using expanded props more common? Explicitly declare them.
>> Brian Holt: [COUGH] It depends on who you ask. I'm a big fan of not using objects and using lots of props. But you'll get people that will disagree with me, cuz we do end up with things like this, right?

[00:09:24] This is getting quite long and I've seen a lot longer, but it's very explicit of this is what this component expects. Now, if you're using something like TypeScript, which I would suggest people do, it can validate both. And as long as everything is getting it all that it requires, but it would be the same thing if we just had an object, and those were on multiple lines as well.

[00:09:47] So it makes little difference. I prefer having multiple top level components personally. I think it makes this simpler.
>> Brian Holt: Good question. Other questions? If you haven't, or if you've fallen behind, there is another commit here that you can go grab that we're under the state and life cycles part of the course.

[00:10:15] So feel free to go grab that.