Check out a free preview of the full State Machines in JavaScript with XState course:
The "Create a State Machine Solution" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

David live codes the solution to the create a state machine exercise.

Get Unlimited Access Now

Transcript from the "Create a State Machine Solution" Lesson

[00:00:00]
>> Welcome back. If you didn't finish the exercise, that's okay because we're going to be doing it together. By the way, in your index.js there's a lot of helpful comments and in the index.final.js that's going to really help you when you get stuck because that contains the pretty much the answer to everything.

[00:00:19] So first let's take a look about how we could use a nested switch statements in order to transition our machine. So, I'm just gonna copy paste this over. And so you see we're switching on the states. If it's inactive, and we get a CLICK, which I named uppercase CLICK, then we return the active state.

[00:00:46] If we're in the active states, and we get a CLICK, then we go to the inactive states. Now we need some way of keeping track of each of these states. So we could say like currentState equals inactive because that's going to be our initial state. And then we determine the next value of currentState by saying const nextState equals transition currentState event.

[00:01:14] And this is going to return the nextState based on the currentState in the event or it's just going to return the currentState if there is no nextState. So once we determine the nextState, we need to keep track of it. So we'll set currentState equal to the nextState. And then we could change the data states property.

[00:01:34] Or the data state attribute of the box elements to that current states, which is really cool, because it's a very easy way in JavaScript in order to put those attributes right on the elements. And so the last thing we need to do is we need to actually send that CLICK event.

[00:01:53] So whenever this box is clicked, we're going to send that event and hopefully it's going to change, but start it's okay to start. Again, if you see that error, you could just save and it goes away. And so now when you click, we'll see that it moves from active to inactive, to active and back to inactive.

[00:02:19] So let's talk about this a little more. What we're doing is we're literally reducing our logic in our event handlers to just one thing. We're sending in events. That's all we're doing. And we're sending it to the central place that contains all of our logic. Now, of course, these switch statements are pretty verbose.

[00:02:40] So if you did the extra credit, you hopefully you got the objects in text down. So let's sort of redo all of this and actually use object syntax. So instead of this, we wants to create the machine. So we're going to say const machine equals and we're going to have an object.

[00:03:03] The initial state is going to be inactive and there's going to be two states. There's going to be the inactive state and the active state. In the inactive state, when we receive a CLICK, we go to the active state. Similarly, in the active state, when we receive a CLICK, we go to the inactive states.

[00:03:25] And so the role of the transition is to read this object and determine the next state based on the events. So we could do that by saying, return machine.states, we get the states .on events. And if that doesn't return anything, then we just return the states. And so hopefully we didn't have to change anything else.

[00:03:54] So that should work exactly the same way. Let's console.log the nextState, just to make sure. All right, so we're transitioning back and forth between active and inactive. By the way, if you want to know how I showed this at the bottom, by using the data-state attribute if we go into the styles.

[00:04:20] We can see that we're actually outputting that data state attribute right on to the elements of data states right over here. We have an after pseudo elements, and we could just put that data-state right there. And this makes it really easy to inspect what the state is.