Complete Intro to React, v5 Complete Intro to React, v5

Reformatting the Pet Component

This course has been updated! We now recommend you take the Complete Intro to React, v6 course.

Check out a free preview of the full Complete Intro to React, v5 course:
The "Reformatting the Pet Component" 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 adds a hero image and renders a more complete version of the component that shows for each pet in the search results.

Get Unlimited Access Now

Transcript from the "Reformatting the Pet Component" Lesson

[00:00:00]
>> Brian Holt: So right now, we have this pet component, it's pretty much empty. I deleted all the content inside of it so you and I are gonna rewrite this a little bit so it looks a little bit nicer. So this is the pet component's gonna show in the search results page, which is gonna be used here in the results component.

[00:00:16] So at name, animal, breed, and do media, location, and id. We'll pull those out of the props, so they're gonna be passed down. First thing we wanna have is a placeholder image just in case, cuz some of these animals don't actually have
>> Brian Holt: Images. So we're going to use place corgi which is my favorite place to grab placeholder images, and we'll grab a 300 by 300 pixel image, and then we'll say if(media.length).

[00:00:51] So if media, which is the photos coming in here, has any length to it, and we'll say, yeah. If media.length, then we'll say hero = media, 0 is the first image in here and the small image inside of it. So that'll give us either the first image that we can find or look at the place corgi.

[00:01:19] And then here, we're going to return, a href, so this is going to be a link to the details page, which will I think will be the next thing that we'll code up together. So /details/$ {id} and className="pet". Inside of that, we'll put a div with className="image-container".
>> Brian Holt: And inside of that, an image where the source is equal to hero and the alt is equal to the name of the pet.

[00:02:02]
>> Brian Holt: Okay, beneath that we'll have div className="info".
>> Brian Holt: And inside of that, we'll have an h1 with a name.
>> Brian Holt: And h2, and here I'm gonna use a template string. You also can do this without template strings. It's kinda up to you, I found this easier to do with template strings.

[00:02:25] So we're gonna put animal
>> Brian Holt: And then dash and then breed
>> Brian Holt: Then a dash and location, okay?
>> Brian Holt: So a lot of React program looks like this, where it's just constructing markup, right? A lot of just front end development in general kinda looks like this. But now, if we go back over and look at our pet component, this should look a lot more pleasant.

[00:03:00] Let's go take a look at the Adopt Me. We'll search for something, and you can see here, we're getting back all sorts of pets.
>> Brian Holt: And you can see here that these corgi ones, these are the ones that don't have images.
>> Brian Holt: So go ahead and jump up to the commit here.

[00:03:23] If you're behind, this commit was,
>> Brian Holt: This one here, async calls to Petfinder API, update Pet component. So if you can jump forward to that commit, you'll be caught up with me.