Skip to content
Version: XState v5

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.”

Coming soon… why you might use an onDone event.

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.