Advanced State Management in React (feat. Redux and MobX) Jetsetter Solution: Render Items and Handle Input

Transcript from the "Jetsetter Solution: Render Items and Handle Input" Lesson

[00:00:01]
>> Steve Kinney: So, we're going to implement this application together and see kind some of the difficulties like I said before, it's a small app but it has a bunch of the problems we find in larger applications, right? Like, we are gonna have to pass stuff down from parents to children to grandchildren, right.

[00:00:22] In a larger application you might have to go down a few more ancestors, but the process is effectively the same, right? So it's a small enough app to feel a little bit of the hurt, but also begin to wrap our minds around it. So the first thing I'm gonna try to do is, I have an array of just like default items.

[00:00:39] I'd love to get those on the page.
>> Steve Kinney: So, right now, if I go to Application and what I'm gonna do real quick is, I'm gonna just start extra live coding branch, so I can push these up
>> Steve Kinney: Live coding, call it basic state.
>> Steve Kinney: All right, so I have this array of default items.

[00:01:12] I think the first thing to do is to set the initial state with those. So we will say items and we'll say defaultState, right. I could copy and paste them but why? Okay, that's not gonna show them on the page per se because I'm passing empty arrays in.

[00:01:30] Now I know that I need two different kind. I need two different arrays. I need the packed items and the unpacked items. And so I know that I have the items. I can get them from state right here. So I can say const. I use restructuring to get items.

[00:01:46]
>> Steve Kinney: And if you haven't seen this syntax before, it is simply the same as saying const items equals this.state.items. But I add two extra curly braces and save myself four characters. But it allows me to do that. So now, each one of these items has a packed boolen.

[00:02:03] I'm just gonna cheat a little bit, I'm gonna use a filter. And this does mean that I'm gonna filter through each one of them on every render. I'm okay with that for right now.
>> Steve Kinney: So I say packedItems, and this will equal items.filter.
>> Steve Kinney: I'll say item.
>> Steve Kinney: All right, so that'll go through.

[00:02:31] If packed is true, it'll end up in this array. If packed is false, we need the opposite. So we'll say,
>> Steve Kinney: Items.filter, and if the item is not packed.
>> Steve Kinney: Cool. All right, so I have both of those in place. And now I need to pass them to the components.

[00:02:59] So luckily, that's pretty easy to do.
>> Steve Kinney: One thing I know, and so if you catch me doing it, because I rehearsed this enough times, is that I will mix up the packed and the unpacked items more than once today. So if you see it, don't think that, he's doing some dark sorcery here.

[00:03:17] I probably made a boo-boo. So you can call me on that.
>> Steve Kinney: Cause that's why pair with 100 of your friends all around the world. At the same time it's to catch those tiny mistakes very quickly. All right, so let's go take a look at what we have in this case.

[00:03:38] Okay, can't find filter of undefined. All right, that's interesting. So may go, check this out, this is the defaultState because I misspelled item. I told you.
>> Steve Kinney: All right, very cool. So now, their rendering on the page. That's nice cuz I'm passing them down. If you look at the items should get through each one of them and map over them.

[00:04:01] So I gather them on the page, I still can't do anything with them, I can't add a new one. I think the next step for us is to be able to add a new item to the page because that will be fairly simple one for us so far.

[00:04:14] Now, the items live in state currently in the application, right? Which is the only place I really have access to them because bypassing down those props, they're immutable. So I can't give them to the new item component. That's not gonna work. Instead, I can give the new item component a function, that the new item component can call and it can manipulate the state, right.

[00:04:37] So that's again, like, anything passed as props is completely mutable, so it's not like, hey, here is some items, go add to them, or something along those lines, it's data down, actions up. But I can't give away the data and then expect to know about it. So what we'll do is we'll make a new function and we'll call it add item.

[00:04:59]
>> Steve Kinney: And add item will go ahead and it will take whatever the new item is. And really what we want to do is we want to push it onto the array. I have a few ways that I could do this, I could push it onto the array and then set the state to the new version.

[00:05:16] I'm gonna use the spread operator and I will explain it if you haven't seen it before but first I'm gonna write it because it's easier to explain. So this.setState and we'll say that the items are now ...this.state.items. What this does effectively is it allows me to copy the array.

[00:05:41] Make a new array with all the items that are currently in state and I'm gonna give it this new item at the very beginning. This will go to the top of the list. If you put it at the end, it'll end up at the bottom of the list.

[00:05:51] It feels better to me at the top of the list, so that's kind of the reason I made that decision. All right, so let's check it out. We're gonna have another issue with it in a second, but let's take a look. So now, I still can't type in this field.

[00:06:07] So I have the function to add an item, but now I need to give that to the NewItem field, cool. So NewItem currently doesn't take any props, and it definitely needs to. So I'll say, hey, onSubmit,
>> Steve Kinney: This.addItem. Cool, so now we're gonna give the ability to add an item.

[00:06:30] Now this function is created in the application scope, so it has access to the state of the application component. So we'll give it away, we'll pass it down to the new item component.
>> Steve Kinney: All right, so new item has his handleChanged. It seems like a good place to call addItem.

[00:06:49] The reason I have an extra method here is because it's not necessarily gonna be the item there. It's gonna be the event when they hit submit on that form. So what I really want is the name of that new item. So that will be, in my case, it's going to be a event.target.value.

[00:07:08]
>> Steve Kinney: Cool. So let's go ahead and implement that. So I'll say const value = event.target.value. Then we'll do,
>> Steve Kinney: This is the change. I actually need to do this in submit. So we'll get the onsubmit. We've got that passed in, and so what we'll do, we'll say onsubmit.

[00:07:33] The value but there's actually a few other things. I need the defaults. And I don't really have a great set up for this right now, but I will later in the day, but right now the items aren't just a string, they are the value, right. That we want the title of the item.

[00:07:49] It is also whether or not it is packed in a unique ID. So I have the ID that I gave myself from lodash, which is just gonna increment the strength, so the first time it is one, then it is two, then it is three, so on and so forth.

[00:08:01] So what we will say is, onSubmit we will pass it the value as well as an ID that's gonna be uniqueId. And we'll say by default, packed is false. I don't love that I'm doing this in here, right? I will have to figure this out later as we move to like Flux and Redux, a better place to do this.

[00:08:25] Right, it's seems like the presentational component, should not handle like normalizing my data, right? But this is what we have for now. So the value is the state of this new item component, so it has its own state, it's got that input field, right? We talked about like, input field and femoral state, so we go ahead and say.

[00:08:48]
>> Steve Kinney: So we get the value of the field whenever it changes. And we'll set it to the state of that component, which will now allow me to type in it at least. And when they hit submit, I'm going to pass that function I was passed in from application.

[00:09:02] That's been passed down into new item, I will call that. It has access to the list of items, all right? This is already getting a little squirrely. And the last thing I'm gonna do is, right now if I save this and I head over I can add a new thing.

[00:09:20] But then I don't clear the input field, and that's gross. So we'll say when this has been successful. We'll go ahead and then say, this.setState values back to an empty string.
>> Steve Kinney: All right, let's give it a shot. You've got to pack cheese whenever you go anywhere. We’ll add it [INAUDIBLE].

[00:09:46] We have now the ability to show all them. They are being sorted. We have the ability to add a new one, right? We had to pass functions around. We’ve had to pass the array of items that goes to the two items list. And then from there, each items list is gonna pass it to an item component.

[00:10:03] So this is where it gonna get fun.