Next.js Discord

Discord Forum

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

Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
Progressive enhancement is great and fast to display the error messages for invalid input fields. I followed the new 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 ? (
    className="mt-2 text-sm text-red-500"
    { string) => (
      <p key={error}>{error}</p>
) : 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 hook
you might be interesting in this video
Transvaal lionOP
Cheers Ray - I'll have a look at that.. Thanks!