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.