fix(examples): fix next server actions example

see Next Server example does not work TanStack#967
rburgst · Oct 3, 2024 · 0729321 · 0729321
1 parent 6f7db6e
commit 0729321
Show file tree

Hide file tree

Showing 3 changed files with 291 additions and 296 deletions.
diff --git a/examples/react/next-server-actions/package.json b/examples/react/next-server-actions/package.json
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@tanstack/react-form": "^0.33.0",
-    "next": "15.0.0-rc.0",
-    "react": "19.0.0-rc-6d3110b4d9-20240531",
-    "react-dom": "19.0.0-rc-6d3110b4d9-20240531"
+    "next": "15.0.0-canary.160",
+    "react": "19.0.0-rc-5dcb0097-20240918",
+    "react-dom": "19.0.0-rc-5dcb0097-20240918"
   },
   "devDependencies": {
     "@types/node": "^20.14.10",

diff --git a/examples/react/next-server-actions/src/app/client-component.tsx b/examples/react/next-server-actions/src/app/client-component.tsx
@@ -1,20 +1,23 @@
-'use client'
+"use client";
 
-import { useActionState } from 'react'
-import { mergeForm, useForm, useTransform } from '@tanstack/react-form'
-import { initialFormState } from '@tanstack/react-form/nextjs'
-import someAction from './action'
-import { formOpts } from './shared-code'
+import { useActionState } from "react";
+import { mergeForm, useForm, useTransform } from "@tanstack/react-form";
+import { initialFormState } from "@tanstack/react-form/nextjs";
+import someAction from "./action";
+import { formOpts } from "./shared-code";
 
 export const ClientComp = () => {
-  const [state, action] = useActionState(someAction, initialFormState)
+  const [state, action] = useActionState(someAction, initialFormState);
 
   const form = useForm({
     ...formOpts,
-    transform: useTransform((baseForm) => mergeForm(baseForm, state!), [state]),
-  })
+    transform: useTransform(
+      (baseForm) => mergeForm(baseForm, state ?? {}),
+      [state]
+    ),
+  });
 
-  const formErrors = form.useStore((formState) => formState.errors)
+  const formErrors = form.useStore((formState) => formState.errors);
 
   return (
     <form action={action as never} onSubmit={() => form.handleSubmit()}>
@@ -26,7 +29,7 @@ export const ClientComp = () => {
         name="age"
         validators={{
           onChange: ({ value }) =>
-            value < 8 ? 'Client validation: You must be at least 8' : undefined,
+            value < 8 ? "Client validation: You must be at least 8" : undefined,
         }}
       >
         {(field) => {
@@ -42,18 +45,18 @@ export const ClientComp = () => {
                 <p key={error as string}>{error}</p>
               ))}
             </div>
-          )
+          );
         }}
       </form.Field>
       <form.Subscribe
         selector={(formState) => [formState.canSubmit, formState.isSubmitting]}
       >
         {([canSubmit, isSubmitting]) => (
           <button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Submit'}
+            {isSubmitting ? "..." : "Submit"}
           </button>
         )}
       </form.Subscribe>
     </form>
-  )
-}
+  );
+};