S
SolidJS•2y ago
Liquido

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
Brendonovich•2y ago
the values on status are reactive, try wrapping the console.log in a createEffect
Liquido
LiquidoOP•2y ago
Makes sense thank you!

Did you find this page helpful?