Add note about $ACTION_ properties, remove reference to .entries()

[karlhorky]

What?

Make a note about the $ACTION_ properties in formData

Why?

Starting with next@14.1.3, $ACTION_ properties have appeared in the formData, which cause validation errors when used with a strict validation with a library such as Zod or Yup:

// Form Client Component
export default function Form() {
  const [state, formAction] = useFormState(action, {
    type: 'initial',
  });

  return (
    <form action={action}>
      {/* ... */}
    </form>
  );
}

// Server Action
export async function action(
  prevState: ServerActionReturnValue,
  formData: FormData,
): Promise<ServerActionReturnValue> {
  const validationResult = await schema.validate(
    Object.fromEntries(formData.entries()),
  );

The errors from Yup:

Errors:

• this field has unspecified keys: $ACTION_REF_1, $ACTION_1:0, $ACTION_1:1, $ACTION_KEY
  The data in the formData.entries()

{
  '$ACTION_REF_1': '',
  '$ACTION_1:0': '{"id":"59f475b...","bound":"$@1"}',
  '$ACTION_1:1': '[{"type":"initial"}]',
  '$ACTION_KEY': 'k187677481',
  // Real form data starts here:
  year: '2024',

How?

1. Document additional properties with keys starting with the prefix $ACTION_
2. Remove the obsolete mention of .entries(), since that is not being used in the code example anymore (previously, it was const rawFormData = Object.fromEntries(formData.entries()))

History

• The $ACTION_ property change was added in Docs: Note $ACTION_ formData properties #63048
• The docs/01-app/02-guides/forms.mdx file was added in PR Docs IA 2.0: Create Forms guide #79288 , without the $ACTION_ property change

cc @delbaoliveira

[ijjk]

Allow CI Workflow Run

• approve CI run for commit: 105affc

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

[ijjk]

Allow CI Workflow Run

• approve CI run for commit: 105affc

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

[icyJoseph]

This happens in prod too right? In v15.5.4, I see $_ACTION_ID_<id>.

LGTM though.

[karlhorky]

@icyJoseph what do you think, is this ready to be merged?

[karlhorky]

Thanks for the review and merge!