https://react.dev/reference/react-dom/hooks/useFormStatus
You can use this version: https://ibb.co/mCGGxZ7

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

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.

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

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

try: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/164bb5947ba1e3eee05c1523840fae7949460a5b/types/react-dom/canary.d.ts#L6-L8

@Yellow croaker did ^ work?

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)

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

ye added it

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

but it still was not working ;(((

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

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😕

ohh i forgot it wasn't just a type error

but idk about nexting your forms tbh

Yeah im trying to follow the Nextjs Learn section form example
https://nextjs.org/learn/dashboard-app/mutating-data
Bottom of the page is the example

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

Not sure what u mean by nesting here?

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

like your paranet compoent has a form, and your button commonent also has one, and im not sure if they work well nested

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

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.

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

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

Worked out thanks!