SolidJSS
SolidJS•13mo ago•
7 replies
Amir Hossein Hashemi

Why submission result doesn't update?

In the component below, it appears that submission does not update when the action does not return anything.

import { action, useSubmission } from "@solidjs/router";
import { Show } from "solid-js";

const addPost = action(async (formData: FormData) => {
  const title = formData.get("title") as string;
  if (!title || title.length < 4) {
    return {
      isError: true,
      error: "Title must be at least 4 characters",
    };
  }
  console.log("Post added: ", { title });
}, "addPost");

export default function Page() {
  const submission = useSubmission(addPost);
  return (
    <form action={addPost} method="post">
      <input name="title" />
      <Show when={submission.result?.isError}>
        <p>{submission.result?.error}</p>
      </Show>
      <button>Submit</button>
    </form>
  );
}


Let's say I enter "12" in the input field and submit the form. In this case, submission.result would be:

{
  isError: true,
  error: "Title must be at least 4 characters",
}


After that, I input "34" into the field, which passes the validation. I expected that since the action does not return anything in this scenario, submission.result should be 
undefined
 and the error message should not be displayed. However, it seems that submission.result does not update at all. I must return something from the action to update the submission result.

Can you explain why this happens? I couldn't find any documentation about it.
Was this page helpful?