Check out a free preview of the full State Machines in JavaScript with XState course:
The "Nested 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 write code that will allow the box element to only move on the X-axis when the shift key is pressed.

Get Unlimited Access Now

Transcript from the "Nested States Exercise" Lesson

[00:00:00]
>> So, in this exercise, We are going to add one more thing to our drag drop machine, and then we're going to call it done. So in this drag drop machine, what we want to do is we want, pressing the Shift key to restrict the x-axis of the of the dragging.

[00:00:21] So right now, when you move this around, nothing happens cuz resetPosition is not defined. So let's actually grab that from, the 09indexfinal, resetPosition, here we go. So if you run into the same error, just go ahead and grab resetPosition from final.js. So right now when you drag, you could drag in any direction.

[00:00:50] But what I want to happen is when you press the Shift key while you're dragging, we only want it to move on the x-axis, which it doesn't do right now. So your goal is to make dragging a nested state, or a parent state with nested states. We want a normal state and we want a locked state.

[00:01:11] The normal state is going to have the same normal dragging behavior, so you don't really have to do anything in there. The locked state is going to make it so that when you move your mouse, so when you handle this mousemove event, you're no longer just assigning the delta.

[00:01:27] You are assigning only the x value of the delta because we only care about how far it moved on the x-axis.