Check out a free preview of the full State Machines in JavaScript with XState course:
The "Guarded Transitions 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 use a guarded transition to prevent the box element from being dragged more than 5 times which gives more control over possible inputs. This exercise introduces students to building transitions.

Get Unlimited Access Now

Transcript from the "Guarded Transitions Exercise" Lesson

>> In exercise 6, we have our exact same drag-drop machine that we made. But, let's say that we have a very special drag and drop application. It's a software as a service, and we only want people to be able to drag a maximum of five times or so.

[00:00:19] What I want you to do is I want you to keep track of how many times it was dragged. And we want to disable this dragging once it reaches more than five. So in the JavaScript, we have our exact same code as before. But now, when we're in the idle state, we want to add a condition to this transition which makes it a guarded transition, in order to disallow it from happening once we have five or more drags.

[00:00:54] And in order to keep track of the drags, we could do that whenever we enter the state, increment the drag counts by using a sign.