Remix.run popup toast message on HTTP error status

user_7590495 0
Viewed 154

Wondering what the recommended approach is to fire a popup toast message (keeping the rest of UI intact) when the server returns an error response from an ActionFunction? I realise I can use a CatchBoundary, but that will replace the component, so do i just need to embed the component within the catch boundary and add a toast component? Feels clunky. Is there any way I can simply get the response status in my main component, something similar to useCatch()?

remix.run
1 Answers

You can return data from your action and useActionData to get it.

export function action() {
  if (someError) {
    return json({error: 'oops'})
  }
}
export default function() {
  const data = useActionData()
  return (
    {data?.error ? <Toast message={date.error} /> : null }
  )
}
user_2936090
Related