Complete Intro to React v4 Render Component from API Data

Transcript from the "Render Component from API Data" Lesson

[00:00:00]
>> Brian Holt: So we're gonna now do some handling asynch UIs and events. So on this details page, we wanna make it so there's like a nice carousel of the various images of the animals. So you can click on one and it'll show you a bigger picture of it, right?

[00:00:21] So first thing we wanna do before we get into that those, we wanna make the details page like you said, go under request more data from the API.
>> Brian Holt: So we're going to import pF from petfinder-client, and we'll say const petfinder = the same thing that we did before, pf, key is process.env.API_KEY.

[00:00:58] And this one is gonna be secret: process.env.API_SECRET, okay? And we have class detail down here, we're gonna give it a constructor. Constructor props, as you remember you have to do the super props first.
>> Brian Holt: Then this.state = an object, and the first thing that we're gonna say is when you load for the first time you're gonna be loading, right?

[00:01:39] Because when this renders for the first time, it's not gonna have the data back from the API. So you need to indicate to the user, I'm loading, right? So the first thing we'll do is to say, loading and then once it has finished loading, then we'll turn that to false.

[00:01:55] It's a very common pattern for React
>> Brian Holt: Okay, then here in our componentDidMount.
>> Brian Holt: We're going to do all of our requests.
>> Brian Holt: So we're going to say petFinder.pet.get, output: Full,
>> Brian Holt: And id: of this.props.id, so this will come from remember from the route?
>> Brian Holt: And then we'll say, .then,

[00:02:47]
>> Brian Holt: Data.
>> Brian Holt: And we have to do the same thing with the breed here to make sure that we make the breed look nice. So let breed, if Array.isArray Of (data.petFinder.pet.breeds.breed).
>> Brian Holt: Then we're gonna say, breed = data.petFinder.pet.
>> Brian Holt: .breeds.breed.join, [LAUGH] (', ').
>> Brian Holt: Else, breed is just gonna be equal to block same thing, without the join.

[00:03:52]
>> Brian Holt: Then, here we're just gonna do a big old set state. This.setstate,
>> Brian Holt: Name: is gonna be new data., men I guess this be easier if I just did this.
>> Brian Holt: const pet = data.petFinder.pet.
>> Brian Holt: And I can see once you, yeah whatever. And then, here you can just make everything a little bit shorter.

[00:04:43]
>> Brian Holt: Yeah?
>> off screen male: You're saying you used componentWillMount instead of componentDidMount.
>> Brian Holt: I did, sorry wrong auto completion. Thank you.
>> Brian Holt: And not this twice.
>> Brian Holt: Okay, name: pet.name, animal: pet.animal, location,
>> Brian Holt: Is pet.contact.city, pet.contact.state
>> Brian Holt: Description,
>> Brian Holt: Is pet.description.
>> Brian Holt: Media: pet., you maybe wondering how it's actually doing this auto completion for me, which I think is again one of my favorite parts of a VS Code.

[00:06:04] Because I wanted to find all the type scripts types for this library, and knows what the shapes gonna look like. And despite the fact that we're not writing type scripts like right now, VS Code is actually running type script behind the scenes on your application. So it's doing that so it can give you auto completions for JavaScript, which I think is pretty compelling.

[00:06:28]
>> Brian Holt: So you didn't know it, so you're writing type script, so congratulations. breed: breed, right? Because we defined breed up here. But if you remember correctly, if you have breed: breed you can just say breed.
>> Brian Holt: And then loading, at this point we're no longer loading because it's loaded the application for the first time, so we're gonna say loading false.

[00:06:55]
>> Brian Holt: So that's a lot of writing, so I'm gonna give you a second to catch up on that one.
>> off screen male: Do we no longer need to handle the case of an empty breeds array, or breed array, like null?
>> Brian Holt: It always has a breed. The API should always return you a breed.

[00:07:17]
>> Brian Holt: In order to enter into their system it has to have a breed, but if it didn't you'd have to worry about that.
>> off screen male: So, it was the pets array that we did that for enough to breed.
>> Brian Holt: Yep, that's the annoying one. And honestly, if we put a bad idea into this right now, it's gonna crash.

[00:07:35] When we get to the typescript part of writing the application for this, it will force us to handle that. Cuz we access like this might crash and I'm not going to let you continue until you make sure that you handle the crash part of this. Last thing here, until it's good to catch, in case of an error.

[00:07:56] So error, and here you can just say,
>> Brian Holt: this.setState, error: error,
>> Brian Holt: We're not actually gonna do anything with this, but as you might imagine here, if there was an error then you would show the user some sort of error state, or something like that. Or I guess you can be even more sophisticated about it and just say, navigate.

[00:08:47] So this comes from reach/router,and just say, hey, if you don't have anything for this particular pet, just navigate back to the homepage.
>> off screen male: It's just a global?
>> Brian Holt: No, I imported up here from rich/router, so you don't have to pull all the way from there.
>> Brian Holt: I don't have that.

[00:09:12]
>> Brian Holt: No, it automatically imported it when I typed it. Yeah?.
>> off screen male: Why would you have a catch on a set state? And what situation would a, because why would the set state have a catch?
>> Brian Holt: No it's, no you're right, I messed it up. It shouldn't be on the catch, or it shouldn't be on the set stage.

[00:09:34] It should be on the promise.
>> Brian Holt: Yeah, you're right. So this should be catching the promise, not the set state.
>> Brian Holt: Another thing that TypeScript totally caught for me, right? Because there's no catch on this.set state. But we would have seen that error right away, it would have crashed right away.

[00:10:08]
>> Brian Holt: So now we should be getting data back from our API. Now what we wanna do is we wanna display it in a nice way. So here instead of render, instead of this business right there, we're gonna say, const animal, breed, location, description = this.state.
>> Brian Holt: And the first thing if it's loading.

[00:10:33] So you’re gonna say, if (this.state.loading). As you might imagine, you might make some nice spinning indicator letting the user knowing that you're loading. In this case, we're just gonna say, return an h1 of loading. But again, you would want to take clear like invest more time in making that look nice, but in our case is enough just to say, loading.

[00:11:09]
>> Brian Holt: Return, div className = details,
>> Brian Holt: Another div inside of that, and we're gonna have an h1.
>> Brian Holt: H1 with a name,
>> Brian Holt: h2 with animal, and- breed, and- location.
>> Brian Holt: And then last thing under that go to p with the description,
>> Brian Holt: And this will take everything that we loaded from the API in display in a nice way for our users.

[00:12:38]
>> Brian Holt: Okay, so just to refresh the page, then I'll click on one of these. And you can see here it takes me to a page with that cats information. Did I get the name wrong?
>> Brian Holt: Yeah, I didn't, that's weird. It should give me an error about that.

[00:12:59] And now we have. I'm not showing the image yet we'll do that here in a second we're gonna build the carousel but,
>> Brian Holt: But if you do notice for a second it does say loading up there before flash is,