Check out a free preview of the full State Machines in JavaScript with XState course:
The "Parallel States Exercise" 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:

Students are instructed to build orthogonal states where light and dark mode happen at the same time as bright and dim mode.

Get Unlimited Access Now

Transcript from the "Parallel States Exercise" Lesson

[00:00:00]
>> So the way that we define parallel states is, go to the exercise, type in index.js. We define parallel states by giving it type, parallel. And this is how we know that the states inside are all going to be active at the same time. Now because of this we don't need to define an initial state because all of those states are by defaults initial states and they represent regions not exactly states.

[00:00:37] So we could have more than one states for example, we will just start this, we would have the mode, and we could have the brightness. Now, the mode, this state itself is what's called compound states. And compound states are those nested states that we were talking about. So this does have an initial state, and like we remember from the last example, it's initial state was light and it could have two possible states such as brights and dark.

[00:01:14] For brightness, we could have an initial state of brights. And then we could have two possible states, so states Right in dim. So let's go ahead and see what this looks like. If we console .log it. So console .log, we're just going to log the state .value to see.

[00:01:40] All right, so if we go to exercise 11. Cool, all right. We're in the hidden state now, but once we turn it on, we see that we're in more than one state. So this is where that object syntax really helps. We're both in the brightness .bright state in the mode .lights states.

[00:02:00] So, obviously I didn't add any transitions, but this is where you're gonna change for example, mode to dark or brightness to dim, etc. So Johan asks is region in orthogonal state? Yes. So you could consider both of those regions. And in fact, if we take this, and we put it in the visualizer.

[00:02:25] [BLANK AUDIO] You can see those regions visualized. So when you turn them on, you're going to see that we enter both the mode and brightness parents states, and we entered their initial states at the exact same time. What we wants to do is we wants to transition between the light and dark states when we switch, and we want to go from bright to dim after five seconds and dim to bright on that same switch events.

[00:02:56] So, good luck.