00:00 So let's come down here to where that state is being managed currently. We have this isFavorited state, and we need to lift that up to matching posts. But it's not quite so simple this time, because this is relative to a specific card. If we just move it up here into matching posts, it's like, wait, which one is favorited?

00:18 So instead, we have to have a list of IDs or, yeah, just like an array of all of the IDs that are currently favorited. So it's not just a matter of move that state up, but like actually think about what that state means.

00:33 So here we're going to have a useState for favorites, and this will be an array of strings. So we'll give TypeScript a little bit of help with that array of strings. There we go. And from that, we can derive the sorted version of this. So we've got this sort already put in here for us.

00:56 And because this isn't a JavaScript workshop, we're going to just give this to you. So it's a workshop that includes JavaScript, but I'm not here to teach you JavaScript. So here we determine whether the A is favorited or B is favorited. And then based on that, we return the proper number so that these are sorted properly.

01:15 OK, so with that, though, now we have to not only set those favorites appropriately when one is checked or unchecked, but we also have to derive that state properly in the card. So we're going to pass an isFavorited and an onFavoriteClick.

01:32 So isFavorited will be if the favorites includes this post's ID, then we know it's favorited. And then when the heart is clicked inside of the card, we're going to pass whether it's currently favorited. And if it is, then we're going to return the updated favorites.

01:53 So here we'll set our favorites. We get the previous favorites of the current value of the favorites, what used to be the current value. So it's a previous. And if we're toggling it to or if it's currently favorited, then we're going to filter out our current post. We're going to unfavorite it.

02:12 If it's currently not favorited, then we're going to combine the previous one with our new post ID. OK, great. So right here, I think my instruction said call this favorited or toFavorite or whatever, but that works just fine.

02:31 OK, so now we've got to come down here and accept those props in addition to what we have already. So we've got isFavorited. And that's going to be a Boolean and onFavoriteClick, it will accept an isFavorited Boolean and return nothing. We don't care about whatever it turns and we'll accept those right here, isFavorited and onFavoriteClick.

02:52 There we go. And then down here, this will be onFavoriteClick. And this is the state we want it to be. And that should take care of those. And then down here, it's just working out already with this isFavorited. Yeah, we determine which heart to show based on that.

03:15 So we've got everything. Hopefully this works. Let's just test it out. Click on that. And oh, totally not working because this logic is incorrect. I was worried about that. So this isn't whether it's currently favorited. This is what the next phase should be. So I'm going to blame our AI assistant for getting that wrong.

03:35 This is favorite, whether we want to have it be favorited. So that is where we call it right here. We're saying onFavoriteClick, we want it to be false now. And here we want it to be true now. So isFavorite, we're going to swap these two. So do we want it to be favorited? Yes, we do. We will add it. Do we want it to no longer be favorited?

03:55 No, or yes, that is the case. And so we'll remove it. OK, so that should fix it. Click that and boom, it shoots off to the top, shoots off to the top. Everything is working super well. And now it is sorted the way that our users wanted it to be sorted. Which, you know, it is what it is. So there you go.

04:15 That is a lifting state. It's not always as easy as like, let's just move this thing up and pass these props. Sometimes you actually got to think through how is this state changing and how is it being stored and how do we have to think about it going forward? So that is some more lifting state.