[Bug]: Example given in "Handling return values in forms" section for "use-server" docs fails to compile
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
Summary
The following example is given in Handling return values in forms section for "use server" docs, fails to compile.
// requestUsername.js
'use server';
export default async function requestUsername(formData) {
const username = formData.get('username');
// ..
}
// UsernameForm.js
'use client';
import { useActionState } from 'react';
import requestUsername from './requestUsername';
function UsernameForm() {
const [state, action] = useActionState(requestUsername, null, 'n/a');
// ..
}
Page
https://react.dev/reference/rsc/use-server#handling-return-values
Details
It fails to compile because, as per the useActionState docs,
useActionState(action, initialState, permalink?)
the "action" (requestUsername in this case) should have previousState as the first argument,
and formData as the second argument.
However, for the above example, the requestUsername action has formData as the first argument,
rather than previousState. Therefore, it fails to compile.
The following is the correct way mentioned in the useActionState docs:
async function increment(previousState, formData) {
return previousState + 1;
}
function StatefulForm({}) {
const [state, formAction] = useActionState(increment, 0);
// ..
}
I can raise a PR for the fix, if it's okay.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked “Handling return values in forms” section on the use-server page and compare its useActionState example with the linked useActionState documentation. Update the requestUsername example so its arguments match the documented action signature, then verify that the documentation example compiles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100