Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "MobX Exercise: Model Methods" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Coding the solution to adding MobX models to the Jetsetter application.

Get Unlimited Access Now

Transcript from the "MobX Exercise: Model Methods" Lesson

[00:00:02]
>> Steve Kinney: All right, so we have the ability to add them, right? And it gets added to the right list. I have not implemented the ability to check or remove yet. We haven't done that, we haven't done filtering. And what I would like you to do is add the ability to be able to check and remove one of these.

[00:00:20] So let's talk a little bit about what's gonna be involved in that. You have the item in the singular item component, you could literally call remove or something like that. You do need to do a little bit of mechanics. I would also recommend giving yourself a method, so that you can just pass that as the On click, for On the On click, on either the check box or whatever.

[00:00:43] So I'm gonna get you kind of started in that case and then help you tie it together. Your major job is gonna be spending a few minutes just kind of implementing it in the UI and getting a feel for this. And I will push up this branch before we do that.

[00:00:59] So with the item list, really, we wanna call remove on an item, but we want it taken out of the item list. So what we'll likely do in this case is we'll go in and we'll give the item list a remove. And we'll say,
>> Steve Kinney: [INAUDIBLE] remove, let's see.

[00:01:25]
>> Steve Kinney: We call add item, right? So we'll say,
>> Steve Kinney: removeItem with a given item and all that's gonna do is say this.items=this.items.
>> Steve Kinney: And I don't even need to check for an ID, because before they were different objects in memory and we used the ID as a way to tell.

[00:01:52] What I can do is just point it like are you literally that item, right? Cuz we're back to objects stored in memory references. It can change all of those things. We don't necessarily need to worry about each of these. So we can say remove items. And then what we'll do in the individual item is we'll give ourselves,

[00:02:15]
>> Steve Kinney: action.bound, and we'll say remove, nope,
>> Steve Kinney: We'll say this.list,remove(item). So it will be like hey, when I get removed I know, this.list.remove(this). I know when they call remove on me, tell the list I want out. And then we should be able to have it automatically removed from the list as well.