Published on

How to close a dialog on success or render an error with Remix fetchers

  • avatar
    Nico Prananta

Ryan Florence of Remix tweeted about how to close a dialog on success or to display some error messages after submitting a form with Remix's useFetcher.

export async function action({ request }: ActionFunctionArgs) {
  let formData = await request.formData();
  let status = formData.get('status');
  return status === 'success'
    ? { ok: true, error: null }
    : { ok: false, error: 'There was a problem' };

function Example() {
  let ref = useRef<HTMLDialogElement>(null);
  let fetcher = useFetcher<typeof action>();

  useEffect(() => {
    if (fetcher.state === 'idle' && {
  }, [fetcher]);

  return (
      <button onClick={() => ref.current?.showModal()}>Open Dialog</button>
      <dialog ref={ref}>
        <fetcher.Form method="post">
          <p>{fetcher.state === 'idle' ? 'Make a choice' : 'working...'}</p>
          <button type="submit" name="status" value="success">
            Get Success
          <button type="submit" name="status" value="error">
            Get Error
          <p style={{ color: 'red' }}>
            {(fetcher.state === 'idle' && || <>&nbsp;</>}

The code looks very simple because of the power of Remix's fetcher. ❤️

By the way, I have a book about Pull Requests Best Practices. Check it out!