Signup errors with useActionState
Use useActionState(signup, initialState) for the signup form. signup(prevState, formData) is already written: it returns { errors, values } when something is wrong and { errors: {}, values: { username: "" }, message } on success.
Show state.errors.username in <span id="username-error"> next to the field, and give the input aria-invalid="true" and aria-describedby="username-error" when there is an error.
Keep what the user typed after an error: set the input's defaultValue from state.values.username.
Show state.message in <p id="message"> on success, and disable the #submit button while isPending.
What Check tests
- The form uses
useActionState - A taken name shows
That name is taken.and the button is disabled while checking - The input is marked invalid and points to the error
- What the user typed is still in the box
- A free name shows
Welcome, meera!and clears the error
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.