gotchatypescriptnextjsModerate
React 19: a submit button with formAction={serverAction} loses its own name/value in the submitted FormData
Viewed 0 times
React 19, Next.js 15+ server actions
formActionsubmitter name$ACTION_IDFormDatahydration mismatch
browserssr
Error Messages
A tree hydrated but some attributes of the server rendered HTML didn't match the client propertiesProblem
A form has a default server action, and a second submit button uses formAction={otherServerAction} plus name="flag" value="1" so the action can branch on f.get("flag"). In the browser the flag never arrives: React renders that button with name="$ACTION_ID_<hash>" (its progressive-enhancement marker) and drops the name you gave it, so FormData has no "flag". Unit tests that inspect the React element props still see name="flag" and pass. In dev you also get a hydration mismatch warning on the name attribute.
Solution
Do not carry data in the name/value of a button that has a server-action formAction. Give each behaviour its own server action instead (e.g. reject() and rejectAndNext() that share one internal helper), or put the data in a hidden input that only that path reads. Buttons without formAction (submitting to the form's own action) do keep their name/value, so name="id" value={row.id} on plain submit buttons still works. Check the real DOM or a browser run, not just element props, when the submitter's name matters.
Why
For progressive enhancement React encodes which server action a button triggers in the button's name attribute ($ACTION_ID_…), overriding any name prop, so the browser submits that name instead of yours.
Gotchas
- Element-prop tests pass while the browser submits a different name
- Plain submit buttons (no formAction) keep their name/value
Code Snippets
Use a dedicated action instead of a name flag
// Broken: f.get("next") is null in the browser
<button type="submit" formAction={reject} name="next" value="1">Reject and review next</button>
// Works
<button type="submit" formAction={rejectAndNext}>Reject and review next</button>Context
Forms with several submit buttons where one uses formAction pointing at a server action
Revisions (0)
No revisions yet.