Update useFormState example

src/content/reference/react-dom/components/form.md

@@ -363,32 +363,35 @@ export async function search() {
 }
 ```
 
-</Sandpack>
-
-### Processing forms differently with different submit buttons {/*processing-forms-differently-with-different-submit-buttons*/}
-
-Forms can be designed to handle multiple submission actions based on the button pressed by the user. Each button can be associated with a distinct action or behavior. When a user taps a specific button, the form is submitted, and a corresponding action, defined by that button's attributes and action, is executed. For instance, a form might allow users to either save their input as a draft or submit it for review with separate buttons.
+To surface specific error messages to your users from a form action you can use the `useFormState` Hook. `useFormState` takes two parameters: an action and a inital state, and returns two values, a state varible and a new action. When you use the action returned by `useFormState` it will call the action passed to `useFormState` with the current state as an argument. The value that the actions passed to `useFormState` returns will be used as the new value for the state var.
 
 <Sandpack>
 
 ```js App.js
-export default function Search() {
-  function publish(formAction) {
-    const content = formAction.get("content");
-    const button = formAction.get("button");
-    alert(`'${content}' was published with the '${button}' button`);
-  }
-
-  function save(formAction) {
-    const content = formAction.get("content");
-    alert(`Your draft of '${content}' has been saved!`);
+import { useState } from "react";
+import { useFormState } from "react-dom";
+
+let maxUsers = 1;
+
+export default function NewsletterSignUp() {
+  const [signups, setSignups] = useState(0);
+  async function addEmailToNewsletter(prevState) {
+    if (signups >= maxUsers) {
+      return "maximum users reached";
+    }
+    setSignups(signups + 1);
   }
-
+  const [errorMessage, formAction] = useFormState(addEmailToNewsletter, null);
   return (
-    <form action={publish}>
-      <textarea name="content" rows={4} cols={40} />
-      <button type="submit" name="button" value="submit">Publish</button>
-      <button formAction={save}>Save draft</button>
+    <form action={formAction}>
+      <label>
+        Email:
+        <input type="text" />
+      </label>
+      <button disabled={!!errorMessage} type="submit">
+        Sign up
+      </button>
+      <p style={{ color: "red" }}>{errorMessage}</p>
     </form>
   );
 }
@@ -397,34 +400,44 @@ export default function Search() {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental",
+    "react": "canary",
+    "react-dom": "canary",
     "react-scripts": "^5.0.0"
   },
   "main": "/index.js",
   "devDependencies": {}
 }
 ```
 
+</Sandpack>  
+
+
 </Sandpack>
 
-### Managing state inside a form {/*managing-state-inside-a-form*/}
+### Processing forms differently with different submit buttons {/*processing-forms-differently-with-different-submit-buttons*/}
 
-To manage state inside a form you can use the `useFormState` Hook. When working with forms, state often represents the data a user inputs or the actions they take. The `useFormState` works in conjunction with React's `<form>` Component to update state inside a form based on a user's input.
+Forms can be designed to handle multiple submission actions based on the button pressed by the user. Each button can be associated with a distinct action or behavior. When a user taps a specific button, the form is submitted, and a corresponding action, defined by that button's attributes and action, is executed. For instance, a form might allow users to either save their input as a draft or submit it for review with separate buttons.
 
 <Sandpack>
 
 ```js App.js
-import { experimental_useFormState as useFormState } from "react-dom";
+export default function Search() {
+  function publish(formAction) {
+    const content = formAction.get("content");
+    const button = formAction.get("button");
+    alert(`'${content}' was published with the '${button}' button`);
+  }
 
-export default function Counter() {
-  async function increment(n) {
-    return n + 1;
+  function save(formAction) {
+    const content = formAction.get("content");
+    alert(`Your draft of '${content}' has been saved!`);
   }
-  const [count, incrementFormAction] = useFormState(increment, 0);
+
   return (
-    <form>
-      <button formAction={incrementFormAction}>Count: {count}</button>
+    <form action={publish}>
+      <textarea name="content" rows={4} cols={40} />
+      <button type="submit" name="button" value="submit">Publish</button>
+      <button formAction={save}>Save draft</button>
     </form>
   );
 }
@@ -442,4 +455,4 @@ export default function Counter() {
 }
 ```
 
-</Sandpack>  
+</Sandpack>