formData from useNavigation hook | Remix | Page 1

I would like to extract the form data from my form,

return (
    <Form method="post" key={data.post?.slug ?? 'new'}>
      <p>
        <label>
          Post Title:{" "}
          {errors?.title ? (
            <em className="text-red-600">{errors.title}</em>
          ) : null}
          <input type="text" name="title" className={inputClassName} defaultValue={data.post?.title} />
        </label>
      </p>
      <p className="text-right">
        <button
          type="submit"
          name="intent"
          value={isNewPost ? 'create' : 'update'}
          className="bg-blue-500 px-4 py-2 text-white hover:to-blue-800"
          disabled={isCreating || isUpdating}
        >
          {isNewPost ? (isCreating ? "Creating..." : "Create Post") : null}
          {isNewPost ? null : (isUpdating ? "Updating..." : "Update")}
        </button>
      </p>
    </Form>
  );

VS Code is giving a syntax error when i try to access the form button with the name 'intent' like :

  const transition = useNavigation();
  const isCreating = transition?.formData.get('intent') === 'create';
  const isUpdating = transition?.formData.get('intent') === 'update';

ps : https://remix.run/docs/en/1.18.1/hooks/use-navigation#usenavigation

Following Kent c. dodds tutorial on Egghead here : https://egghead.io/lessons/remix-add-update-functionality-to-an-edit-post-page-in-remix

Thanks 🙏

egghead

Add Update Functionality to an Edit Post Page in Remix

Now we just need to add in the functionality to edit our posts.

We will duplicate createPost since it has most of what we need already and use Prisma to update our post.

We will also add in the conditional for our button to know if we are creating a new post or updating an existing one.

Remix

useNavigation

#formData from useNavigation hook