From d0d1710439ec281518b17d03126b5d9cd008a102 Mon Sep 17 00:00:00 2001
From: Ben Holmes <hey@bholmes.dev>
Date: Wed, 15 May 2024 06:45:20 -0400
Subject: [PATCH] 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 <contact@florian-lefebvre.dev>

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
---
 .changeset/dirty-planes-punch.md   |  5 +++++
 packages/astro/src/@types/astro.ts | 10 ++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/dirty-planes-punch.md

diff --git a/.changeset/dirty-planes-punch.md b/.changeset/dirty-planes-punch.md
new file mode 100644
index 0000000000..1c2ff17d21
--- /dev/null
+++ 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
index b595f2b58a..bad3b3cb79 100644
--- 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>