Is there a simpler way to hide error messages from `useFormState()`?
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
Progressive enhancement is great and fast to display the error messages for invalid input fields. I followed the new
The error messages persists whenever a user focuses the related input, but I'd like to hide the error as the user updates the input. So I am curious if the best solution is to wrap everything in an additional
nextjs.org/learn
guide and built the dashboard. Now I am playing around. As for this part: const initialState = { message: null, errors: {} };
const [state, dispatch] = useFormState(createInvoice, initialState);
// ...
{state.errors?.customerId ? (
<div
id="customer-error"
aria-live="polite"
className="mt-2 text-sm text-red-500"
>
{state.errors.customerId.map((error: string) => (
<p key={error}>{error}</p>
))}
</div>
) : null}
The error messages persists whenever a user focuses the related input, but I'd like to hide the error as the user updates the input. So I am curious if the best solution is to wrap everything in an additional
useState
and use a bunch of useEffects to toggle everything on and off. I fear I might be over complicating things here...4 Replies
Transvaal lionOP
I am curious if anyone have tried to solve this?
yeah I couldn't find a way to hide the error either and now I just use server action without
useFormState
hookyou might be interesting in this video
https://www.youtube.com/watch?v=XD5FpbVpWzk
https://www.youtube.com/watch?v=XD5FpbVpWzk
Transvaal lionOP
Cheers Ray - I'll have a look at that.. Thanks!