Check out a free preview of the full State Machines in JavaScript with XState course:
The "XState Actions 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 an action with XState that sets the data-point attribute of the element with the box ID to wherever it was clicked on the mousedown event. The goal of the exercise is to determine at what point the mouse is clicked.

Get Unlimited Access Now

Transcript from the "XState Actions Exercise" Lesson

>> Exercise four is going to be a simple exercise. We're going to be taking the machine that we created before, but now we wants to know what points in the box we actually put our mouse down on. So again, if you see this box once we. Oops. Once we click the box, we know that it goes from inactive to active, but we're going to be making a drag drop machine and we want to know where exactly in the box we actually clicked.

[00:00:37] So if we go to exercise four, we'll see a couple of different things. So,most of the machine is already done for you. And this is going to be very close to the same machine that you made in exercise number three. Instead of going from inactive to active, now we're going from idle to dragging.

[00:01:01] Because you could sort of envision this as something that once you put your mouse down, you're in dragging, and then once you lift your mouse up, you're no longer dragging, you're in idle. But we do wants to see what's the point on the box was clicked. So, that would be events.clientx, and events.clienty.

[00:01:26] And so in order to do this, you could do this in any way you want. But we're going to be setting the data points attribute of the box elements to display both of those points. So just to show you real quick, if this had a data points of Hello, which obviously isn't the points, it will show up over here.

[00:01:50] And so instead of Hello, we actually wants to show what point was clicked. And so the set points is going to be an action Inside this mouse down transition. So, are there any questions before we start this exercise?