Skip to content
Version: XState v4

State done events

A state done event transitions from a parent state when one of its child states reaches its final state. State done events are labeled “onDone.”

Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Opened state invokes a startVideo actor and has a description of “The video player should be in full-screen mode.” The Opened state contains Playing and Paused states, which are transitioned between using the Pause and Play events. There’s a Stop event from the Opened state that transitions to the final state of Stopped. There’s an onDone event from the parent Opened state back to the Closed state.Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Opened state invokes a startVideo actor and has a description of “The video player should be in full-screen mode.” The Opened state contains Playing and Paused states, which are transitioned between using the Pause and Play events. There’s a Stop event from the Opened state that transitions to the final state of Stopped. There’s an onDone event from the parent Opened state back to the Closed state.

In the video player above, when the video player reaches the Stopped state, the Opened state transitions through the onDone state done event to the Closed state.

How to add a state done event to a parent state​

  1. Check the final child state has its state type set to Final. If the parent state doesn’t contain a final child state, the state done event type will not be available for transitions from the parent state.
  2. Select the parent state.
  3. Drag from the handles on the left, right and bottom sides of the selected state, and release to create a connecting transition, event and new state.
  4. Select the newly-created event. Then…

Using the quick actions menu​

  1. Right-click the state to open the quick actions menu.
  2. Choose State done event from the Event type options.

Using the Transition details panel​

  1. Open the Transition details panel from the right tool menu.
  2. Choose State done event from the Event type dropdown menu.