#UseFormStatus not working.

34 messages · Page 1 of 1 (latest)

late notch
#

to get useFormStatus to work should i use canary versio or what kind versio from react, because
i get

import useFormStatus

There is no indication in docs that i should use canary or what version from react.

allthought i'm using

    "@types/react": "18.2.19",
    "@types/react-dom": "^18.2.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "next": "^14.0.0",

seems that using experimental_useFormStatus as useFormStatus removes the error.
But i get this error in my browser:

Unhandled Runtime Error

TypeError: react_dom__WEBPACK_IMPORTED_MODULE_2__.experimental_useFormStatus is not a function

Component looks like this:

import { deleteWorkExperience } from '@/app/lib/actions';
import { TrashIcon } from 'lucide-react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

function DeleteButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="button"
      className="rounded-md border p-2 hover:bg-gray-100"
      disabled={pending}
    >
      <span className="sr-only">Delete</span>
      <TrashIcon className="w-4" />
    </button>
  );
}

export function DeleteExperienceButton({
  id,
  name,
}: {
  id: string;
  name: string;
}) {
  console.log('id', id);
  console.log('name', name);
  const deleteExperience = async (id: string) => {
    const response = await deleteWorkExperience.bind(null, id);
    console.log('value', response);
  };
  return (
    <form action={deleteExperience(id)}>
      <DeleteButton />
      <span className="sr-only">Delete</span>
    </form>
  );
}
quartz mossBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

manic raptor
meager leaf
#

its basicly because react doesn't have their own types so you have to rely on @types/ for TS

#

and that isn't managed by react, so kinda slow

late notch
#

Allright! This question got a bit crossposted in general sorry! But yeah i will then install canary version from react, because the experimental tag is not working for some reason.

meager leaf
#

im pretty sure the version of react in nextjs doesn't actually matter as they bundle the right version in next.js anyway

late notch
#

So should the experimental tag work, or is there some sort of bug?

meager leaf
#

@late notch did ^ work?

late notch
#

Yes i think so, now i can import
import { useFormStatus } from 'react-dom';
but yeah the types are not there, so i just probably eslint ignore it?

'"react-dom"' has no exported member named 'useFormStatus'. Did you mean 'FormStatus'?ts(2724)
meager leaf
#

but the thing i linked added it to tsconfig , so you should be able to use it?

late notch
#

ye added it

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "types":["react-dom/canary"],
....
meager leaf
#

but it still was not working ;(((

late notch
#

well atleast its not crashing now 🙂 but it says the error about the exporter member

late notch
# meager leaf but it still was not working ;(((

This question vaguely related to the useFormStatus.

'use client';
import { deleteWorkExperience } from '@/app/lib/actions';
import { TrashIcon } from 'lucide-react';
import { useFormStatus, useFormState } from 'react-dom';

function DeleteButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" aria-disabled={pending}>
      Delete
    </button>
  );
}

export function DeleteExperienceButton({
  field,
  name,
}: {
  field: string;
  name: string;
}) {
  const id = field.field.id;
  // const [state, formAction] = useFormState(deleteWorkExperience, initialState);
  const deleteExperience = deleteWorkExperience.bind(null, id);

  return (
    <form action={deleteExperience}>
      <input type="hidden" name="id" value={id} />
      <DeleteButton />
      <span className="sr-only">Delete</span>
    </form>
  );
}

When clicking deleteButton my form doesnt get called, because i get this kind error:

Uncaught Error: A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().

Is this because my parent component is using useForm where this deleteExperiecneButton is used?

<Form {...workExperienceForm}>
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
          <div className=>
             ...
            <Button className="btn btn-primary mr-1">Submit</Button>
            <DeleteExperienceButton field={field} name={'workExperience'} />
          </div>
        </form>
      </Form>

So i cant really if the pending status from UseFormStatus is working😕

meager leaf
#

ohh i forgot it wasn't just a type error

#

but idk about nexting your forms tbh

late notch
meager leaf
#

but that isn't nesting the forms right? (like having one inside other)

late notch
#

Not sure what u mean by nesting here?

#

oh right! so the forms (buttons) are nested wrongly?

meager leaf
#

also is the first form for react-hook-form?

late notch
#

Oh right that might bring problems yes. If i submit the parent, it might have some side effects to the children form.

Yes first is RHF

#

WorkExperiences.tsx

Accordion type="single" collapsible>
          {workexperiences.map((field, index) => {
            console.log('WorkExperience', field);
            return (
              <div key={field.id}>
                <AccordionItem value={`item-${index}`}>
                  <AccordionTrigger>
                    <div> {field.company}</div>{' '}
                  </AccordionTrigger>
                  <AccordionContent>
                    <Tyotesti field={field} index={index} />
                  </AccordionContent>
                </AccordionItem>
              </div>
            );
          })}
        </Accordion>

*Tyotesti.tsx

<Form {...workExperienceForm}>
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
          <div className=>
             ...
            <Button className="btn btn-primary mr-1">Submit</Button>
            <DeleteExperienceButton field={field} name={'workExperience'} />
          </div>
        </form>
      </Form>

DeleteExperienceButton.tsx

'use client';
import { deleteWorkExperience } from '@/app/lib/actions';
import { TrashIcon } from 'lucide-react';
import { useFormStatus, useFormState } from 'react-dom';

function DeleteButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" aria-disabled={pending}>
      Delete
    </button>
  );
}

export function DeleteExperienceButton({
  field,
  name,
}: {
  field: string;
  name: string;
}) {
  const id = field.field.id;
  // const [state, formAction] = useFormState(deleteWorkExperience, initialState);
  const deleteExperience = deleteWorkExperience.bind(null, id);

  return (
    <form action={deleteExperience}>
      <input type="hidden" name="id" value={id} />
      <DeleteButton />
      <span className="sr-only">Delete</span>
    </form>
  );
}

Here is how the form is structured

#

But yeah might be that i cant use useFormStatus here. Probably just gotta use state to check if its loading.

pseudo basin
#

I had this type of error but with useOptimistic the problem is from @types/react it should be above 18.2.26

#

you have 18.2.19 so just updated to its latest it will work

late notch
pastel mesa
#

Upgrade @types/react-dom to latest too

#

This definition is in react-dom not react

#

And btw you don’t need to modify tsconfig. Revert all changes to tsconfig

late notch