diff --git a/.changeset/dirty-planes-punch.md b/.changeset/dirty-planes-punch.md new file mode 100644 index 000000000000..1c2ff17d218c --- /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 b595f2b58a66..bad3b3cb79c3 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 { *
{ * 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 * }} * > * - * + * * * *