Next.js Discord

Discord Forum

Is there a simpler way to hide error messages from `useFormState()`?

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Avatar
Transvaal lionOP
Progressive enhancement is great and fast to display the error messages for invalid input fields. I followed the new 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

Avatar
Transvaal lionOP
I am curious if anyone have tried to solve this?
Avatar
yeah I couldn't find a way to hide the error either and now I just use server action without useFormState hook
you might be interesting in this video
https://www.youtube.com/watch?v=XD5FpbVpWzk
Avatar
Transvaal lionOP
Cheers Ray - I'll have a look at that.. Thanks!