Handle useSubmit errors

[wide dome]

Hey,

Im struggling a bit with the hooks. I have a page at _app.$id.tsx which is actually an entity. On this page there is a delete button which itself is handle by an onclick event of its child components. Therefor the delete itself is just a function and not a form so i decided to pick the useSubmit handle. Feels all fine and it also works great. I have this code running:

const onListDeleteHandler = async (id: string) => {
  const formData = new FormData();
  formData.append("id", id);
  submit(formData, { method: "post" });
};

And the action is handled like this:

export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const data = Object.fromEntries(formData);
  const result = await deleteById(data.id);
  if (result) {
    return redirect("/");
  }

  return json({
    error: "Something went wrong here",
  });
}

The question im having is, is this all fine and how can i catch the errors in the client that if a delete fails? At this moment is added a json return but ofc it is not doing much. Curious in valid patterns and workflows for this scenario.

[broken valve]

https://remix.run/docs/en/main/hooks/use-fetcher

I use useFetcher() for this situation. just because i have fetcher.data.error (if i return {error: "msd"})
and fetcher.state <3.

if i'm not wrong, u can submit with fetcher without fetcher.Form.

and the cherry on the cake. you can subscribe to fetcher and get the value in other components.

fetcher so powerfull.
Best feature.

[wide dome]

How will that subscribe ook? Just by setting the key?

[broken valve]

i think u can do that :

const fetcher = useFetcher();

const HandleSubmitFetcher = () => {
  
  const formData = new FormData();
  formData.append("id", id);

  fetcher.submit(formData, 
                  {
                  method: "POST", 
                  action: "path (if you not spe take the current)"
                  }
  );
}

//fetcher.data will give you the response
//fetcher.state you can say to your user im charging pls wait...

// this 2 param of fetcher can use in your component and its reactive 

return  (<button onclick="HandleSubmitFetcher"><button/>)

its help or need more explanation ? don't hesitate 🤗

[wide dome]

How can i do that if i have page A and it consume component C. How can i do this? Since component C has my actual form but is just a lazy react component. The problem is that if i put the form there, there is no way for me to access the form data in a callback or something? Atleast as far as i know i cant get it to work. The onSubmit call has a FormEvent but how to access the actual form values there?