+ {({ service, state }) => (
+ <>
+
+
+
+ state:
+ {' '}
+ {JSON.stringify(state.value)}
+
+ >
+ )}
+
+)
+
+export default MyComponent
+```
+
+## Example 4 - TypeScript
+```tsx
+import React from 'react';
+import {
+ MachineConfig, Machine, State, Interpreter
+} from 'react-xstate-js'
+
+interface MyStateSchema {
+ states: {
+ step1: {}
+ step2: {}
+ step3: {}
+ }
+}
+
+type MyEvent = { type: 'NEXT' }
+ | { type: 'PREVIOUS' }
+
+const myMachineConfig: MachineConfig<{}, MyStateSchema, MyEvent> = {
+ key: 'example1',
+ initial: 'step1',
+ states: {
+ step1: {
+ on: {
+ NEXT: 'step2',
+ },
+ },
+ step2: {
+ on: {
+ PREVIOUS: 'step1',
+ NEXT: 'step3',
+ },
+ },
+ step3: {
+ on: {
+ PREVIOUS: 'step2',
+ },
+ },
+ },
+}
+
+const mySavedJSONState = `{ "actions": [], "activities": {}, "meta": {}, "events": [], "value": "step3", "event": { "type": "NEXT" }, "historyValue": { "current": "step3", "states": {} }, "history": { "actions": [], "activities": {}, "meta": {}, "events": [], "value": "step2", "event": { "type": "NEXT" }, "historyValue": { "current": "step2", "states": {} }, "history": { "actions": [], "activities": {}, "meta": {}, "events": [], "value": "step1", "event": { "type": "xstate.init" } } } }`
+
+const mySavedState: State<{}, MyEvent> = JSON.parse(mySavedJSONState)
+
+const MyComponent: React.SFC = () => (
+