Course lesson

Provide XState with Initial Values through Jotai Provider

We currently have a machine that displays a circle of green. When you click it, it will cycle through green, yellow, and Red.

Duration
3 min
Access
Free
Transcript
Retained from source evidence

We currently have a machine that displays a circle of green. When you click it, it will cycle through green, yellow, and Red.

What if you wanted to pass XState initial values from Jotai, you'll need to use the initialValues prop on Jotai Provider and pass a list of pair (atom and value) to it.

To do this we'll refactor the creation of the lightMachine to be a function that accepts an atom as an initial value.

One note to be aware of is that this initial value will only be set when the XState machines instantiate.