Check out a free preview of the full State Machines in JavaScript with XState, v2 course

The "Final States Exercise" Lesson is part of the full, State Machines in JavaScript with XState, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to add a 'finished' final state to the target.

Preview
Close

Transcript from the "Final States Exercise" Lesson

[00:00:00]
>> Now let's go to an exercise on final states. Something that was mentioned in the chat was the facts that we have this sort of ugly looking transition over here, because we're targeting an ID. So it's ugly because we're in a child state of a parent state, but we want this to go directly to an unrelated parent state.

[00:00:22]
Like I called it, it's sort of like an uncle or sibling states. But we could represent this more semantically and in a cleaner way, by using final states instead. So what I want you to do is change this target to go to a finished state, make this finished state a final state and observe what happens with this on done transition.

[00:00:45]
And test it in your app and make sure that everything still works the same.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now