Check out a free preview of the full Complete Intro to React, v5 course:
The "Rendering the 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 completes the render method to include a loading display and the final JSX to be outputted to the DOM after the API response.

Get Unlimited Access Now

Transcript from the "Rendering the Component" Lesson

[00:00:00]
>> Brian Holt: So now, that we've done all of this, let's go make this, let's do the render now, right? So what I'm gonna do, the first thing we're gonna say is if (this.state.loading) then return an <h1> of loading.
>> Brian Holt: Now, we could make this all pretty and have like a nice spinner and everything like that, right?

[00:00:28] But I'll leave that to your imagination, right? For now, we're just gonna show a loading indicator, right?
>> Brian Holt: If that's not true, then what we're gonna do,
>> Brian Holt: Is I'm gonna do some destructuring in here, because this is how I prefer to do it. But this is just my preference here, I'm gonna say const {animal, breed, location, description, name} = this.state.

[00:00:59]
>> Brian Holt: Okay, now, that I've pulled all of those out of this.state, I'm gonna say return inside of a <div>, and <h1> with the {name, I have to have two divs here. Two divs, <div className="details"> that to the end.
>> Brian Holt: Up right there, I got that curly brace, okay.

[00:01:36] So, yeah, make sure you have two divs here. I think I had to do that for styling purposes, so none of you have ever done that before, just put a random div, just so you could style it better? Okay, good, it's just me.
>> Speaker 2: [LAUGH]
>> Brian Holt: All right, instead of that, put an h2, and then I'm gonna put these curly braces, and I'm gonna do same sort of ritual here, animal.

[00:02:01]
>> Brian Holt: [breed]
>> Brian Holt: [location].
>> Brian Holt: Okay.
>> Brian Holt: Under that we're gonna put a button that says Adopt [name].
>> Brian Holt: And then we're gonna <p>, and then inside of that, we'll put the description.
>> Brian Holt: So again, no hooks in here, you have to use this.state and set state. Instead of using update state or set state or set location, like we do with hooks, right?

[00:02:45] We have one function that corresponds to one piece of state, you just use this .setState everywhere. So you'll get very familiar with this type of set state. Now, I'm trying really hard to refrain from calling this the old way of doing things, because I think this is going to be around forever.

[00:03:06] I think that hooks and classes are around to stay. We have no indication that classes are gonna get deprecated. I'm of the personal opinion, this actually a really great API and this is still a valid way to write react and definitely a tool that should be in your toolbox.

[00:03:26]
>> Brian Holt: But I will say that it is definitely easier to start with hooks, right? It's just functions and use state, so let's go see if this works now. This won't work, because details one is not a real place, so let's go click on Fat Boy Slim here. There you go, Fat Boy Slim is a rottweiler in Stanwood, Washington.

[00:03:53] And his sweet nature and and has playful ways.
>> Brian Holt: And then we'll make a button here in just a second that you actually be able to go to the adoption page, if you do want to adopt the animal as well.