Check out a free preview of the full State Machines in JavaScript with XState course:
The "Interpreter 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 create an interpreter, to create a service using interpret, and to set the data attribute to either active or inactive. Interpret creates a new interpreter instance for the given machine.

Get Unlimited Access Now

Transcript from the "Interpreter Exercise" Lesson

[00:00:00]
>> In exercise number three, we're going to be using an interpreter. And so we're going to be using the interpreter in order to interpret that a very similar machine to what we had in the first exercise and so our first step is going to be actually creating that machine.

[00:00:21] Then we're going to be creating a service using interpret and passing that machine into that service. So we listen for state transitions by doing service dot on transition and adding a state listener into there. And what we want to do is instead of just console logging the states, we actually wants to do the same thing where we're setting the data state attribute of L box to either active or inactive.

[00:00:49] Now we want to do this a little bit differently. Instead of clicking to go from active to inactive, we want those to be two separate events. We want it to be the mouse down event and the mouse up event so when you click mouse down, it's active but as soon as you release your mouse and you haven't mouse up events, it goes to inactive.