Errors

Normally action errors are handled by the onActionError callback on the page that initiates the navigation. There are some use cases where the initial request for a page is already a POST request, so there is no page yet to handle the action error with the callback.

Consider a form with a target="_blank" and a method="post". The target will cause the navigation to open in a new window, making this forms' POST navigation the first request of the new browser window.

A useActionError hook is available that returns this initial action error, while rendering the target page itself.

import { useActionError } from 'react-sprout';

let actionError = useActionError();

To present all action errors uniformly, the useActionError hook and the onActionError callback must be combined.

function Route() {
	let actionError = useActionError()

	let [error, setError] = useState(actionError)

	function handleActionError(event, error) {
		setError(error)
	}

	let errorElement
	if (error) {
		errorElement = <Error>{error}</Error>
	}

	return <>
		{errorElement}

		<Form method="post" onActionError={handleActionError}>
			...
		</Form>
	<>
}