Actions: fix minor type issues in documented example (#11043)

* fix(docs): add type case for `e.target`, say "Preact" explicitly * fix(docs): Preact -> React * chore: changeset * Update .changeset/dirty-planes-punch.md Co-authored-by: Florian Lefebvre <[email protected]> --------- Co-authored-by: Florian Lefebvre <[email protected]>
withastro · May 15, 2024 · d0d1710 · d0d1710
1 parent 086694a
commit d0d1710
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/dirty-planes-punch.md b/.changeset/dirty-planes-punch.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes minor type issues in actions component example
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -1776,12 +1776,14 @@ export interface AstroUserConfig {
 		 * };
 		 * ```
 		 *
-		 * Then, call an action from your client components using the `actions` object from `astro:actions`. You can pass a type-safe object when using JSON, or a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) object when using `accept: 'form'` in your action definition:
+		 * Then, call an action from your client components using the `actions` object from `astro:actions`. You can pass a type-safe object when using JSON, or a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) object when using `accept: 'form'` in your action definition.
+		 *
+		 * This example calls the `like` and `comment` actions from a React component:
 		 *
 		 * ```tsx "actions"
 		 * // src/components/blog.tsx
 		 * import { actions } from "astro:actions";
-		 * import { useState } from "preact/hooks";
+		 * import { useState } from "react";
 		 *
 		 * export function Like({ postId }: { postId: string }) {
 		 *   const [likes, setLikes] = useState(0);
@@ -1802,13 +1804,13 @@ export interface AstroUserConfig {
 		 *     <form
 		 *       onSubmit={async (e) => {
 		 *         e.preventDefault();
-		 *         const formData = new FormData(e.target);
+		 *         const formData = new FormData(e.target as HTMLFormElement);
 		 *         const result = await actions.blog.comment(formData);
 		 *         // handle result
 		 *       }}
 		 *     >
 		 *       <input type="hidden" name="postId" value={postId} />
-		 *       <label for="author">Author</label>
+		 *       <label htmlFor="author">Author</label>
 		 *       <input id="author" type="text" name="author" />
 		 *       <textarea rows={10} name="body"></textarea>
 		 *       <button type="submit">Post</button>