I'm using xstate & React to manage my state machine. I am passing data through the onChange handler in the App function. The console log shows that event.target.value is a string but when setResult is ran, event.data is undefined.

I am getting the following error when typing something in the input field:

Cannot read properties of undefined (reading 'data') TypeError: Cannot read properties of undefined (reading 'data') at prompt

Below is my code, any help is appreciated:

import { useMachine } from "@xstate/react";
import React from "react";
import { assign, createMachine } from "xstate";

const newMachine = createMachine(
{
id: "newMachine",
initial: "idle",
context: {
  result: "",
  prompt: "",
},
on: {
  TYPE: {
    actions: ["setResult"],
  },
  target: ".secondary",
},
states: {
  idle: {},
  secondary: {
    entry: "testPrint",
  },
},
 },
   {
     actions: {
    setResult: assign({
    prompt: (context, event) => {
      console.log("Event: ", event);
      return event.data;
    },
    }),
    testPrint: () => {
    console.log("TEST PRINT");
    },
  },
}
    );

 export default function App() {
const [current, send] = useMachine(newMachine);

const { result, prompt } = current.context;
return (
 <div>
  Result: {result} <br />
  State: {current.value} <br />
  <input
    type="text"
    value={prompt}
    onChange={(event) => {
      console.log("Event onChange: ", event.target.value);
      send({ type: "TYPE", data: event.target.value });
    }}
  />
</div>
);
}

I'm using xstate & React to manage my state machine. I am passing data through the onChange handler in the App function. The console log shows that event.target.value is a string but when setResult is ran, event.data is undefined.

I am getting the following error when typing something in the input field:

Cannot read properties of undefined (reading 'data') TypeError: Cannot read properties of undefined (reading 'data') at prompt

Below is my code, any help is appreciated:

import { useMachine } from "@xstate/react";
import React from "react";
import { assign, createMachine } from "xstate";

const newMachine = createMachine(
{
id: "newMachine",
initial: "idle",
context: {
  result: "",
  prompt: "",
},
on: {
  TYPE: {
    actions: ["setResult"],
  },
  target: ".secondary",
},
states: {
  idle: {},
  secondary: {
    entry: "testPrint",
  },
},
 },
   {
     actions: {
    setResult: assign({
    prompt: (context, event) => {
      console.log("Event: ", event);
      return event.data;
    },
    }),
    testPrint: () => {
    console.log("TEST PRINT");
    },
  },
}
    );

 export default function App() {
const [current, send] = useMachine(newMachine);

const { result, prompt } = current.context;
return (
 <div>
  Result: {result} <br />
  State: {current.value} <br />
  <input
    type="text"
    value={prompt}
    onChange={(event) => {
      console.log("Event onChange: ", event.target.value);
      send({ type: "TYPE", data: event.target.value });
    }}
  />
</div>
);
}

• javascript
• reactjs
• xstate

Share Improve this question Follow asked Mar 24 at 4:32 It's Just Me02It's Just Me02 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Just doing some basic debugging I see that prompt is passed 2 arguments, the first is an object and the second is undefined as you have now seen in your code. The first object, however, has context and event properties. You should likely destructure these from the first argument.

const newMachine = createMachine(
  {
    id: "newMachine",
    initial: "idle",
    context: {
      result: "",
      prompt: "",
    },
    on: {
      TYPE: {
        actions: ["setResult"],
      },
      target: ".secondary",
    },
    states: {
      idle: {},
      secondary: {
        entry: "testPrint",
      },
    },
  },
  {
    actions: {
      setResult: assign({
        prompt: ({ context, event }) => { // <-- destructure context and event
          // ...
          return event.data;
        },
      }),
      testPrint: () => {
        // ...
      },
    },
  }
);