Skip to content

Commit d0d1710

Browse files
bholmesdevflorian-lefebvre
andauthoredMay 15, 2024··
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>
1 parent 086694a commit d0d1710

File tree

2 files changed

+11
-4
lines changed

2 files changed

+11
-4
lines changed
 

‎.changeset/dirty-planes-punch.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"astro": patch
3+
---
4+
5+
Fixes minor type issues in actions component example

‎packages/astro/src/@types/astro.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1776,12 +1776,14 @@ export interface AstroUserConfig {
17761776
* };
17771777
* ```
17781778
*
1779-
* 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:
1779+
* 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.
1780+
*
1781+
* This example calls the `like` and `comment` actions from a React component:
17801782
*
17811783
* ```tsx "actions"
17821784
* // src/components/blog.tsx
17831785
* import { actions } from "astro:actions";
1784-
* import { useState } from "preact/hooks";
1786+
* import { useState } from "react";
17851787
*
17861788
* export function Like({ postId }: { postId: string }) {
17871789
* const [likes, setLikes] = useState(0);
@@ -1802,13 +1804,13 @@ export interface AstroUserConfig {
18021804
* <form
18031805
* onSubmit={async (e) => {
18041806
* e.preventDefault();
1805-
* const formData = new FormData(e.target);
1807+
* const formData = new FormData(e.target as HTMLFormElement);
18061808
* const result = await actions.blog.comment(formData);
18071809
* // handle result
18081810
* }}
18091811
* >
18101812
* <input type="hidden" name="postId" value={postId} />
1811-
* <label for="author">Author</label>
1813+
* <label htmlFor="author">Author</label>
18121814
* <input id="author" type="text" name="author" />
18131815
* <textarea rows={10} name="body"></textarea>
18141816
* <button type="submit">Post</button>

0 commit comments

Comments
 (0)
Please sign in to comment.