How to use useSubmission with server action passed to form?

I have a server action that returns data:

const createItemAction = action(async function (formData) {
  "use server";
  try {
    validateInput(formData)
    return { status: 'ok' };
  } catch {
    return { status: 'error' }
  }
});

function CreateItem() {
  const status = useSubmission(createItemAction);

  console.log('status', status.result, status.pending, status.error);
  return (
    <form method="post" action={createItemAction}>
      <input type="text" name="name" />
      <button type="submit">Create</button>
    </form>
  )
}

const createItemAction = action(async function (formData) {
  "use server";
  try {
    validateInput(formData)
    return { status: 'ok' };
  } catch {
    return { status: 'error' }
  }
});

function CreateItem() {
  const status = useSubmission(createItemAction);

  console.log('status', status.result, status.pending, status.error);
  return (
    <form method="post" action={createItemAction}>
      <input type="text" name="name" />
      <button type="submit">Create</button>
    </form>
  )
}

When I submit the form, I get no status data back. How am I supposed to use the useSubmission hook with server action and Form?

2 Replies

Brendonovich•6d ago

the values on status are reactive, try wrapping the console.log in a createEffect

Liquido•6d ago

Makes sense thank you!

Gaming

Programming

How to use useSubmission with server action passed to form?