This course has been updated! We now recommend you take the State Management with Redux & MobX course.
Transcript from the "Jetsetter Solution: Passing state" Lesson
[00:00:03]
>> Steve Kinney: I want to be able to check these buttons or remove the item, right? Where does the list of items live?
>> Steve Kinney: The application component, right? What's in the middle between the individual item and the application component. The item's list, right? The list of the items. So this means that in order to get that event listener down to the individual item, I've got to start going down from the application, down to the item's list, from the item's list down to the item, right?
[00:00:38] And then that even we'll get called all the way back up. All right, who's ready to have fun? Let's do it, cool. So let's go ahead and we'll define these in application.
>> Steve Kinney: And let's go back up here, cool. So we have addItem, and let's call this one let's have it removing an item first, because that's easy to name.
[00:01:08] Remove an item, and we'll say. Now we have it in an array because an array is really easy to work with. It ultimately means we're going to have to iterate it through every time, like if you were trying to, if you knew this was going to get large and you wanted to find one quick like you might be better off with an object.
[00:01:26] Right? Cuz that way you have keys and values and you can be like hey I wanna remove this key from the object. That would technically probably be more performant and in the larger application. Something you should definitely do. But adding a lot of extra like code to this already slightly [INAUDIBLE] example.
[00:01:41] So we're gonna continue using an array, but definitely take a mental bookmark that having an object and removing keys might be more performing. Alright, lets say this dot set state, capitalize set state even, and really what we want to do is set the state to the array of items minus 1.
[00:02:06] Does anyone have a suggestion of how I get an array with everything but one item? Filter it out, right? That'll work. So then we'll say. And how would I find that one? I have an item that I'm looking for. Right, I'm going through each one of them and I have to name this variable something else or I can call this one itemToRemove.
[00:02:33] And we'll go through all the items and if you have an ID that matches the one I'm looking for guess what? You're leaving the array. A better way to put that with Filter is If you don't have the ID that we're looking for, we will pass over you and go to the next one.
[00:02:48] Right. You're spared and like we'll keep going until we find the one that we're looking for. So we'll say each individual one, it does not equal the item to remove, dot ID. Alright, very cool. So, I have it in application, but it needs to start going down each line.
[00:03:10] This is going to be slightly problematic. I also need, I did not have a semicolon. Alright, so I'm going to pass this down to each of the items list, and then that's gonna have to pass it down to each item.
>> Steve Kinney: So what we'll do in this case is we'll add another prop here and we'll say, on remove,
[00:03:35]
>> Steve Kinney: This.removeItem, and then we'll pass it down to the other one.
>> Steve Kinney: All right, cool, that gets us one step there, but not all the way, because we've gotta go down another layer. So we'll go to the items list,
>> Steve Kinney: Plural. And you can see that it is passing this default one, this empty function down that way.
[00:03:59] Basically, so my code didn't blow up cuz the event listeners aren't really wired up, os here's just a no-op. So we know that now, this is a prop, it's this.props to onRemove.
>> Steve Kinney: So we'll bring it in.
>> Steve Kinney: Cool, and What I'm gonna do is I have two choices here.
[00:04:21] I can provide it the ID now, or I can let it pass the ID in, and then pass it out on the way back up. I'm gonna opt for, I have the ID already right here. So I'm gonna say hey,
>> Steve Kinney: We have props, and we'll just pull it out on onRemove.
[00:04:51] The item id, so when they click this, we'll pass it in, so when they click the remove link on the item, that's gonna be passed in from the items, which is gonna go up to the application, right? Again, this is a small application. This doesn't get any better as your application grows.
[00:05:09] So let's try that out, make sure I didn't have some kind of bug.
>> Speaker 2: You're passing by ID, but you were expecting [INAUDIBLE]
>> Steve Kinney: Let's check.
>> Steve Kinney: So remove, we alsp have to say, this.props has to go down as well.
>> Steve Kinney: You're right, I need the whole item.
[00:05:43]
>> Steve Kinney: So we'll fix that here as well.
>> Steve Kinney: And we'll head back over. All right, so now I can remove the phone charger. You can see that I did derive the count from the list of items. I didn't set it manual each time I had an item. They're saying, hey, you got an array of items.
[00:06:02] Go ahead and see how long it is. So that state's derived. I can remove one. I can add one. I also need to be able to check off one. All right? And that's gonna be very similar to how we did it with remove. I'm going to change it up slightly, which is I'm going to pass the function all the way down this time.
[00:06:21] Obviously what you want to be is consistent, I'm just going to demonstrate both, right? You can kind of, we can see the difference but really, you should both removing and checking off the same way. Alright, I'll go back to my application And I'm gonna make a new one called toggleItem.
[00:06:46]
>> Steve Kinney: All right, so I have the problem again, I have an array. What's the easiest way to change one in an array?
>> Steve Kinney: I could map over it and say, hey, if you're the one I'm looking for, I wanna replace you a new one otherwise stay the way you where.
[00:07:06] So we'll try that out. So we'll have toggle item and what we'll do is we'll say
>> Steve Kinney: So this.state.items.
>> Steve Kinney: Map over all of the items.
>> Steve Kinney: If the item ID Does not equal items to toggle. Just don't touch it.
>> Steve Kinney: Otherwise, we'll return the copy of the item, so remember when use the spread operator to copy an array, guess what?
[00:07:49] It also works on objects as well. So what I'll do is I'll just say
>> Steve Kinney: If I do this right here it will copy all of the properties right but I can also define extra properties and those will overwrite previous ones. What I wanna point out here is Xavier asked me a question during when we're working he's like Hey if I use said state and I only pass it one property I want to change, does it clear out all the other ones?
[00:08:20] No. It only replaces keys that are in the object you pass the said state. And effectively that's working the same way that this spread operator works. Which is it's going to take all the keys to items to toggle and then whatever I pass in additionally we'll just copy, previous ones on the Adams toggle.
[00:08:38] Right? So, we'll just overwrite just the keys that we said. So, we'll say packed equals, and I'll just flip that. So, if you're not the Adam we're looking for, we'll add the ID here Pass over it. If you are the item that we're looking for, then we want to flip this.
[00:09:01] And then we will this.setState.
>> Steve Kinney: And if you're starting to think, this is a little bit tedious, that's the point. Right, the point is that we have to pass all the stuff down, we have to bring it back up. Some of this manually manipulating arrays is because we're not actually sending API requests cuz we haven't talked about async yet.
[00:09:23] So some of that is not necessarily going to get so much better, except that we're gonna start copy and pasting. That'll be better, but this idea of passing everything down and bringing everything back up is part of the problem that we're gonna try to solve. Through the remainder of the day.
[00:09:38] First, let's see if we have everything working. So we created it but we didn't passed it down yet.
>> Steve Kinney: So we can say,
>> Steve Kinney: Remember, we're looking at keeping our code dry. Am I doing a really good job with that right now, as I type the same thing twice?
[00:10:04] I'm not, right?
>> Steve Kinney: Cool, so we'll pass toggle item down, and let's see what I actually named it in items. Change that to
>> Steve Kinney: Bring in that on Toggle and pass it down.
>> Steve Kinney: All right, one more level to go. And we'll say onChange. And we'll say.
>> Steve Kinney: And I clean this up in a second.
[00:10:43]
>> Steve Kinney: Pass the item back on up. So we pass the function down two levels. It will get called. That's still gonna be executing from the application where we have to move stuff that will change the array in the application which will change the items being passed to the item's list which will change the item that gets here.
[00:11:00] Before we celebrate, alright it works. Cool. We have one more thing to do but luckily this one's easier because mark alls unpacked is to demonstrate. It'd be great if we didn't have to pass stuff down, because here we're trying to do all of the items, right? And guess where we have all of the items?
[00:11:21] In the same place that we have the unpack button. So this is like again, like a quick refresher to not have to go through all of these steps to pass stuff down. So let's go ahead and implement that real quick in application. So we have this button full width.
[00:11:36] What we will do is make a new method here called Mark all as unpacked.
>> Steve Kinney: And I'm just going to grab this code right here. Except that no matter what, we wanna say packed is false, and we don't want a conditional. Do it to every item.
>> Steve Kinney: Cool.
[00:12:08]
>> Steve Kinney: Alright let's take a look at that. If you don't add it to the button it doesn't work, fun fact. This dot mark All as unpacked.
>> Steve Kinney: Fax them, mark them all as unpacked, and we have mostly a functioning version, right? Like, careful watchers will know as we didn't implement the filter yet, part of the point of doing all this, step-by-step, was to show you how, one, how error-prone it is.
[00:12:46] Two, slightly torturous, right? So I'm not going to subject to also doing it on the filter at this point as well. But we all know how that would have gone, right? We would have actually been able just to keep that in the Items list. Cuz each one of these is unique, right?
[00:13:04] We wanna change state in the items list itself. And then we would have used that value to filter everything out, right? So we can do that in each one of them.