This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Set Component State form API Results" Lesson
[00:00:00]
>> Brian Holt: So what I want to do now is I want to take this petfinder client, I want to go out and fetch a list of animals and render those out using pet. So the first thing we need to introduce now is the idea of state. State is how you keep state inside of your components.
[00:00:21] So state is things that can change. As opposed to props, if you remember here in Pet we have props.name, this is actually immutable, I can't write to this. So if I try and say props.name = 'blah', this doesn't do anything at all. It's actually immutable. And if you're using TypeScript, TypeScript is going to say like, hey you tried to write to this but you can't.
[00:00:44] React will actually ignore you. It just will like, no I don't think so, you're wrong. And props comes from a parent into a child whereas state, always stays in the same level, right? So that's another powerful thing about React is this idea called one way data flow. The data only flows from parent to child and not the other way so you have pet here.
[00:01:08] There's no way pet can pass up data to the parent, right? It has no way of doing that. This is useful because if I ever have a problem inside of pet. Or rather if I have a problem inside of app, I know that pet didn't cause it because there's no way that pet can reach into the parent and modified states.
[00:01:29] It's impossible. They literally made it so you can't do that. Now it can be a little burdensome to deal with this sometimes, right? Sometimes you want to, but it's also really useful because if I'm debugging something, I can already eliminate an entire class of places where it can be.
[00:01:45] I know it's not the children because it can't be the children. I'll show you later how you can kind of effect change in a parent from a child. But it's a very defined and explicit method of doing so. Now what I wanna do is I want to take this data that I'm getting in from the API, rush it in to get these are a different part of the API here.
[00:02:06] But we wanna take in a bunch of pets from the API and then display that to the user. So what I'm gonna do here is I'm gonna put the constructor. The constructor always takes in props. Okay, then the first thing it does is called super props.
>> Brian Holt: This is just a necessity of how React works.
[00:02:29] The constructor is actually a JavaScript thing, this is not a React thing at all. The constructor calls the, or is calling the parent component's constructor. So that's what this super props call does. It calls React.Component's constructor and it passes the props up there. And we have to do that, otherwise the React is unable to track our props, right?
[00:02:54] So that's what this super props does, just get used to it. If you ever put a constructor and you're overriding the constructor from the React component.
>> Brian Holt: You have to do super props. That's just an if-then, okay? And then here, we're going to just define the initial state.
[00:03:15] So I'm gonna say this.state equals, whatever I want my initial state to be. So in this case it's gonna be pets, and it's going to be an empty array. This is your default basic initial state,
>> Brian Holt: Okay?
>> Brian Holt: Now, what I want to do is I'm going to change this right here in componentDidMount.
[00:03:44] I'm gonna say petfinder.pet.find. Find, yep, .find.
>> Brian Holt: And then I'm gonna it some parameters. The first thing I wanna give it is output: "full". There's various levels of output that you can ask for, we're gonna ask for the full output. And then you have to give it a location.
[00:04:12] Now, here you can put any city state combination that you want, it just has to be based in the United States. So you could put New York City, NY. You could put Minneapolis, MN. I'm gonna put, of course, Seattle, WA, which is where I'm from.
>> Brian Holt: Okay? So this is going to request all types of animals that are available for adoption in Seattle.
[00:04:41] Okay, once that comes back from the API, I'm going to say .then.
>> Brian Holt: And we get back data from the API. And then, I'm going to do this, so I'm going to say let pets,
>> Brian Holt: If, and this is where. Because this is a little crazy XML, we have to do a lot of data checking to make sure everything exists.
[00:05:09] So we're gonna say, data.petfinder.pets. So if it doesn't find any pets, then pets is gonna be null. So you have to check that that exists. And data.petfinder.pets.pet, I am not making this up. This is just the way they structured their API. Okay, so now I know that pet definitely exists, right.
[00:05:40] The next thing I need to check, if it only finds one pet, it will return to an object. If it finds two pets, it returns to an array, so you have to check if it's an array. If Array.isArray,
>> Brian Holt: data.petfinder.pets.pet, this is actually my favorite thing about TypeScript.
[00:06:09] If you mess up anything here, TypeScript yells at you really loudly. It's what TypeScript's actually good for, in my opinion. Pets = data.petfinder.pets.pet. Else, that means it found one animal which means that we'll do the same thing except we'll just wrap it in array.
>> Brian Holt: Make sense?
>> Brian Holt: Otherwise, else pets = empty array.
[00:06:48] If it finds nothing, just make it an empty array. So just to walk you through, if it exists that's what this first block is. Then here, if I find multiple pets, then just assign it to be whatever it came back from the API with, if it's just one animal, wrap that one animal in array, right?
[00:07:09] And then here, if you don't find anything, just make pets an empty array. This way, we're always dealing with an array, right? Which makes it really easy inside of our render method to deal with it.
>> Brian Holt: So now, we have pets up here.
>> Brian Holt: Now we want to store this in our state.
[00:07:40] We can't just say state.pets = pets. This doesn't work, why? It doesn't work because then React doesn't know when things change. If you do this, React is just blissfully be unaware that it's state has changed and not re-render anything. So we actually have to go through React's way of setting state.
[00:08:00] So that it knows when to re-render. You can actually call setState multiple times inside of one component at mount. It will actually batch them together and only do one update. So it's actually really, really smart about how it does these kind of performance optimizations. So this doesn't work, so the way that you're actually going to do this is gonna be this.setState, which is a method that React provides you.
[00:08:21] And then you're gonna give an object of things to update in a state. So I'm gonna do pets:pets,
>> Brian Holt: Which means I'm gonna take this pets right here and I'm going to update the one that's here in state, right. It does what we call a shallow merge, right?
[00:08:40] So if I have something else here,
>> Brian Holt: This won't override something else, right? Because this is a shallow merge, it's only going to update pets. It's not gonna update something else. Now it's not a deep merge, right? So if it's like multiple layers deep, it will overwrite that.
[00:09:01] So it's just a shallow merge.
>> Brian Holt: Last thing is because it's pets:pets where it's the same word, JavaScript allows you to just do this.
>> Brian Holt: Just to be a little bit more terse about it. If the name and the name of the key that you're setting has the same thing, you can just omit the second part.