Prelude: I am using react 19, I checked
Both the next.js docs and the react docs say that it should work something like this (taken directly from the react docs)
import { useActionState } from 'react';
import { action } from './actions.js';
function MyComponent() {
const [state, formAction] = useActionState(action, null);
// ...
return (
<form action={formAction}>
{/* ... */}
</form>
);
}
My own implementation could not be more similar, I'm even using extremely similar function definitions to try and reduce as many mistakes as possible, it looks like this (taken directly from source)
"use client"
import { useActionState } from "react"
import { submitAction } from "./api/submitData/action"
const initialState = {
message: '',
}
export default function Megaform(props) {
const [state, formAction] = useActionState(submitAction, initialState);
return (
<div>
<p aria-live="polite">{state?.message}</p>
<form action={formAction} {...props}>
{props.children}
</form>
</div>
)
}
Somehow though, I am told that Error: formAction is not defined. How can this be possible, it's defined right there! Please help. Thanks in advance.