This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Using Context in Lifecycle Methods" Lesson
[00:00:00]
>> Brian Holt: We're going to make results now, because we're storing all these search params, right? But we're not doing anything with them, right? We actually wanna be able to use these to search. So, let's go to results and we're going to, import the consumer here as well, import
>> Brian Holt: consumer from ./searchContext.
[00:00:38]
>> Brian Holt: So we have a problem here. I wanna use here in component amount I wanna be able to put in here, animal: context.animal. I wanna be able to read from context inside of the life cycle methods, but what I have shown you so far only works in the render method, right?
[00:00:58] So we're kinda at this impasse where I'm only have context available in render and I don't have it available on the life cycle methods. It's a problem right? I wanna use it here in component amount. So how do I do that? Well, the good news is that you already have all the tools how to do it, you just need to think about it a little bit differently.
[00:01:18] What we're gonna do down here is we've made this entire results component, but we're going to wrap the thing that we export with the consumer and then pass it in as props to results. So, I'm gonna go down here, export default, and rather than just export results naked I'm gonna say default function ResultsWithContextprops.
[00:01:48] And then I´m just going to wrap the result with context and pass it in as props. So return consumer.
>> Brian Holt: And then this is just gonna be a function here context.
>> Brian Holt: Results,
>> Brian Holt: So there's two things I'm actually gonna use this spread operator here, ...props like this.
[00:02:24] Typically, I don't like, I told you this spread operator which we talked about previously. But in this case I'm okay with it because all of these props were going to result anyway, result is already expecting these props. And the props that you're getting, it's getting props from react router or from reach router being passed into it.
[00:02:42] So you wanna just not impede that. We're just gonna pass those along untouched, right? So in this case, this is what the spread operator is made for. This is when it's useful. This is when you should use it.
>> Brian Holt: Okay? And then after that, I'm gonna searchParams = context.
[00:03:05]
>> Brian Holt: So now inside of results we will have the context available by wrapping it with this function. Now you might ask why are you using an error function here or any sort of function like that. The reason why in this particular case I would admonish you to use a normal function like this is because now I have this component called result with context, and this will show up in the call stack if I have an error.
[00:03:30] So this makes it a little bit more verbose so that I can actually see results with context in my call stack which makes it easier to debug, right? I have a named function which is important, does that makes sense?
>> Brian Holt: Okay, so now I have this ability to read from context inside of here just by looking at props.
[00:03:56] So let's go make that work.
>> Brian Holt: So here I'm gonna say, instead of location I'm gonna say, this.props.searchParams.location.
>> Brian Holt: All right?
>> Brian Holt: I'm also gonna add the rest of my parameters in here as well. So just, animal,
>> Brian Holt: this.
>> Brian Holt: Props.search params.animal, let's just make that a multiple lines here.
[00:04:40] Last one we're gonna have breed this.props.search Params.breed
>> Brian Holt: So now this'll read directly from our context and use that for the actual search results.
>> Brian Holt: We're still not all the way there yet. We've made componentDidMount work, but we wanna be able to actually search multiple times, right? This only searches when the component mounts and it doesn't do any more searching, so how do we fix that?
[00:05:22] Just make it another method, right? Instead of calling this componentDidMount, why don't we just call it search? And then well make another componentDidMount in here. And inside of componentDidMount we'll just call this.search.
>> Brian Holt: So now we have a search method and we can make it any time that we click that Submit button, that it'll just do a search, right?
[00:05:53]
>> Brian Holt: And actually, we're gonna pass this into our search box, so the way we're gonna do that is we're just gonna make this an arrow function as well. Cuz this is gonna call this.props everywhere, right? Which is so we need to do that
>> Brian Holt: Okay, so we now have the search method.
[00:06:25] I'm gonna go down to my search box. Where is my search box, right there. I'm gonna give it one parameter, search which is gonna be equal to this.search.
>> Brian Holt: So now this is gonna be passed into the search box. If we go to searchbox.js
>> Brian Holt: We're gonna go down to the button, and we're gonna say onClick = this.props.search.
[00:07:09]
>> Brian Holt: And actually we can even make this a little better. Let's just wrap it in a form.
>> Brian Holt: We'll get rid of this right here.
>> Brian Holt: And above.
>> Brian Holt: So I did this inside of the div. Here, form and we'll do onSubmit=[this.props.search]. So now this will cover two cases, if they hit Enter on it it will actually do the search.
[00:07:48] And if they hit the Submit button, hit the [INAUDIBLE] button they don't give a type to it it's a submit button. So it will actually submit the form as well.
>> Brian Holt: Except you have to handle that. So let's actually do this, handleFormSubmit. Sorry, this is in my notes, so I'm improvising this little bit.
[00:08:08] this., this is gonna take an event. And in the event, you're gonna have to do preventDefault.
>> Brian Holt: Otherwise, the form will actually try and submit, right?
>> Brian Holt: And then you can say, this.props.search.
>> Brian Holt: And then here, instead of saying this.props.seach, you will say HandleFormSubmit.
>> Brian Holt: This is a little bit more robust.
[00:08:44] This is probably how you should do it, which is why I'm showing it to you.
>> Brian Holt: Cuz now we'll handle multiple different cases.
>> Brian Holt: Here I'm using consumer inside of the render method, and I'm not making a new component down here. I just export the false search params as opposed to search box.
[00:09:08]
>> Brian Holt: I still call these both search params, yeah don't do that, call the other one a search box, sorry. That's just for debugging purposes.
>> Brian Holt: So here I'm doing it this way and then in results, if you come down here I'm exporting a function which the consumer wraps it.
[00:09:28] Here's the reason why I choose to it this way I think in general this is more explicit and I prefer this when you can possibly do this. So if you only have to reference context inside of the render, that's the only place that you need it, you can do it this way.
[00:09:46] In this particular case context is only used here in the render. We're just doing event listeners and we're reading from it, but here in results.js, we need it on props so that we can reference it inside of search, and in inside of componentDidMount. If you need to reference it inside of the life cycle methods you have to do it this way.
[00:10:09] Okay, let me make sure this works. So now if I say dog and I hit Submit, I guess I was already looking at dogs, that's not super helpful. Let's look at Havanese and say Submit, cool. We're back and I'm gonna show you how to fix what was the problem before.
[00:10:37] What happened previously is some of the data was coming back from the API corrupted. It was incomplete and in this particular case it wasn't including photos which meant here in pet.js. This call right here to where I was calling photos, this is what it was before photos,
>> Brian Holt: 0.value, and this photo 0 was undefined.
[00:11:04] Which meant that this value was trying to access a property on an undefined property which is not good [LAUGH], right? So we went ahead and fixed this by doing, let's see, this line right here, line 14, const hero image, right? If photo images, a photo zero exists, then make it photos zero.value.
[00:11:28] If it doesn't exist, then we're just using a place holder image, this is from placecorgi.com which is literally one of my favorite websites in the entire world. Just to show you what this is, I'll click on that. It's an adorable dog. Is anyone upset by this? No. Because it's a corgi and they're adorable.
[00:11:47] So in order to replace that, in fact you can see here I was looking this one right here, Coco, was the one that was messing it up. So that's what we did here, if photos
[0] exists then use the value from that otherwise use the place holder.
>> Brian Holt: And then here you just take that, this hero image, and let's put that here instead
[00:12:17]
>> Brian Holt: Makes sense?
>> Brian Holt: So now, to kind of re-demonstrate the search working, I can put a bird here, I can put an African Grey, and we'll put this in San Francisco California, and hit Submit. And you should see a bunch of African Greys which are almost all in Utah, that's cool.