(Invalid) Can't use useActor to interpret a spawned machine

[DirkWolthuis]

Hi,

xstate: 4.13.0
@xstate/react: 1.0.0-rc6

In my main machine I use:

addAlarm: {
              on: {
                SET_ALARM: {
                  actions: assign({
                    alarms: (context, event) => [
                      ...context.alarms,
                      spawn(
                        alarmMachine.withContext({ timeToRing: event.payload })
                      ),
                    ],
                  }),
                  target: "idle",
                },
              },
            },

And after passing the spawned machine to a component I try to interpret the machine with useActor.

import React from "react";
import { useService, useActor } from "@xstate/react";
const Alarm = (alarm) => {
  const x = useActor(alarm);

  return (
    <div className="w-full flex justify-between items-center p-8">
      <div>
        <small>alarm set for:</small>
        <h1 className="font-mono text-4xl">21:00</h1>
      </div>

      <div>
        <button className="py-2 px-3 rounded border-2 border-white font-bold text-white hover:bg-white hover:text-gray-800">
          Cancel
        </button>
      </div>
    </div>
  );
};

export default Alarm;

This throws an error: Uncaught TypeError: actor.subscribe is not a function. useService also produces an error: Uncaught TypeError: Cannot read property 'bind' of undefined.

What am I doing wrong?

[davidkpiano]

Can you please make a CodeSandbox reproduction (React template) demonstrating the problem?

[DirkWolthuis]

https://codesandbox.io/s/epic-snow-ithlq?file=/src/index.js

[davidkpiano]

It was a React typo, unrelated to XState:

-const Alarm = (alarm) => {
+const Alarm = ({ alarm }) => {
  const [state, send] = useActor(alarm);
  console.log(state, send);
  return <p>I'm an Alarm</p>;
};

You'll see it works with those changes.

[DirkWolthuis]

I'm so sorry :( thank you anyways.